The parts, for anything you build.
Design tokens as CSS variables, and plain components on top of them. Light and dark, comfortable and compact. No framework and no build step.
npm i @excellent-so/kitnpm
What you get
- 01
No build step
Link two stylesheets and use the classes. A single-file viewer a command-line tool serves looks the same as a React app.
- 02
Both themes, both densities
Every part works light and dark, comfortable and compact, from one class and one attribute.
- 03
Rules the tests hold
Text contrast in both themes, and amber and red only where they mean something. The tests fail when a part breaks one.
- 04
One file when you need it
A command writes the kit between two markers in a page that can’t link files. --check fails CI when it’s stale.
Two colours mean something
Amber is for Verified and red is for Returned or failed. Every other state is ink, and none rests on colour alone: each badge carries a glyph.
Forms
A label over every field, a hint under it when it helps, and the error in place of the hint.
A mark for each tool
Each tool built on the kit has its own mark, drawn on a 16-unit grid in ink. The same drawing is its favicon and the head of its README.
Tables, in the dark
Click a heading to sort. Numbers sit right in tabular figures, and every part works in both themes.
How it works
- 1
Install it
npm i @excellent-so/kit - 2
Link it
<link rel="stylesheet" href=".../kit/tokens.css"> <link rel="stylesheet" href=".../kit/kit.css"> - 3
Use the parts
<button class="ex-btn">Run the check</button> <span class="ex-badge ex-badge--verified">Verified</span>
Details
- Ships
- tokens.css, kit.css, kit.js, tokens.json and the fonts
- Works with
- Plain HTML, any framework, Tailwind (through tokens.json)
- Dependencies
- None
- Fonts
- Geist and Geist Mono, SIL Open Font License
- License
- MIT
Try Excellent kit.
Free and MIT licensed. Coming soon: the code goes public at launch.
npm i @excellent-so/kitnpm