Usage guide

Include Millet CSS, optionally add enhancement JS, then write semantic HTML.

Install

<link rel="stylesheet" href="millet.css">
<script type="module" src="millet/core.js"></script>

For docs/local demo pages, this project uses styles.css and enhance.js under docs.

Core patterns

  • <button type="submit"> yields primary action styling.
  • data-variant, data-size, and data-width provide variants.
  • Forms, dialogs, popovers, tabs, and toasts gain behavior through enhancement JS.
  • Use semantic roles and native elements first, then add optional attributes for polish.

Theming

Override tokens on :root to customize look and feel.

:root {
  --ml-hue: 210;
  --ml-radius: 7px;
  --ml-font: system-ui, sans-serif;
}