modest-ui

A minimal, themeable CSS component library. Black and white by default, easy to customise.

Installation

npm install github:thisismodest/modest-ui

Usage

Bundled CSS (recommended)

Use the pre-bundled CSS file that contains all styles:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thisismodest/modest-ui@main/dist/modest-ui.css" />

Or with a bundler:

import "modest-ui/dist/modest-ui.css";

Cherry-pick components

/* Always include tokens first */
@import "modest-ui/base/tokens.css";

/* Then pick what you need */
@import "modest-ui/components/button/button.css";
@import "modest-ui/components/input/input.css";

Documentation

View the component documentation and examples at thisismodest.github.io/modest-ui

Theming

Override CSS custom properties to create your own theme:

:root {
  --mdst-color-fg: #000;
  --mdst-color-bg: #fff;
  --mdst-color-border: #000;
  --mdst-color-muted: #666;
  --mdst-color-subtle: #f5f5f5;
  --mdst-color-focus: #000;
  --mdst-color-error: #dc2626;
  --mdst-color-success: #16a34a;
  --mdst-radius: 0;
  --mdst-border-width: 0.0625em;
}

Use the Theme Playground to experiment with different themes.

Development

Start a local server to preview components:

npm run dev

Then open http://localhost:8000

Adding a new component

1. Create a folder in components/ with your component CSS and a preview.html:

components/
└── my-component/
    ├── my-component.css
    └── preview.html

2. Add the import to index.css:

@import "./components/my-component/my-component.css";

3. Generate and build:

npm run generate  # Updates sidebar in index.html
npm run build     # Bundles CSS to dist/

See CONVENTIONS.md for component and preview formatting guidelines.

License

MIT