Installation
Two tags, no build step. Or copy the files into your project.
Link the files
Add the stylesheet and the script. That is the whole installation.
<!doctype html>
<html lang="en" data-noodle="mian">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
</head>
<body>
<button class="mn-btn">Hello, MIAN</button>
</body>
</html>Self-host
Download mian.css (or mian.min.css) and mian.js and serve them yourself. There are no other files: no fonts, no icons, no images.
CSS only
If you only need the 99 CSS-only components, leave out the script. Components that use it are marked CSS + mian.js on their page.
Copy into your project
Every component and noodle is also a registry item, a JSON file with its CSS, example markup and metadata, in the open registry-item format, so you can keep your own copy:
curl -O https://mian.ro/r/button.json # a component
curl -O https://mian.ro/r/noodle-fensi.json # a noodle (tokens + skin)The full list is at /r/registry.json.
Remember the reader's theme
The theme controller stores the chosen noodle and mode in localStorage. Put this in <head>, before the stylesheet, to apply it before first paint:
<script>
try {
var n = localStorage.getItem('mian:noodle'), m = localStorage.getItem('mian:mode');
if (n) document.documentElement.setAttribute('data-noodle', n);
if (m) document.documentElement.setAttribute('data-mode', m);
} catch (e) {}
</script>