Lightweight
Minimal surface area with sensible defaults. Keep your markup clean and your UI consistent.
Semantic HTML, styled.
Millet is a tiny, semantic-first CSS layer for common UI elements — no framework, no build step.
Components are styled with native tags and a few data-* attributes.
Zero dependencies
Just CSS (and optional progressive enhancement). Works in any stack — or no stack.
Semantic by design
Buttons, forms, fieldsets, and typography are styled via native elements and attributes.
Accessible defaults
Global focus rings, good contrast, and validation wiring that respects standard browser semantics.
Usage
Include the stylesheet and (optionally) the enhancement script. Then use semantic HTML.
For variants, use attributes like data-size, data-variant, and data-width.
<!-- This site (everything under /docs) -->
<link rel="stylesheet" href="styles.css">
<script type="module" src="enhance.js"></script>
<!-- Or from the package: src/css/millet.css + src/js/enhance.js -->Buttons
Types → styles
Sizes via data-size
Variants via data-variant
Button group
Full width
Text inputs
We'll never share your email.
Minimum 8 characters.
Other inputs
Checkboxes & radios
Full form example
Typography
h1 — Page title
h2 — Section
h3 — Subsection
h4 — Group
h5 — Label
h6 — Eyebrow
Body text. Use strong for emphasis, links for navigation, code for inline snippets, and Ctrl+K for keyboard shortcuts.
Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.
Press highlight to mark important text. And small for fine print.
const millet = await import('./millet/core.js');