Beautiful defaults, real components, and dark mode — all in 8KB. One file. No build step. Just beautiful HTML.
Why grit.css
CSS frameworks got complicated. grit.css is one file you drop in. Your HTML looks good immediately. Add a class when you need a component. Write CSS when you need something custom.
Semantic HTML looks good out of the box. Buttons, inputs, tables, blockquotes — all styled without adding a single class.
Cards, modals, dropdowns, tabs, toggles, alerts, badges, tooltips, progress bars, avatars, skeletons — one class each.
Row, col, grid, container, wrap, grow, center, between. A handful of layout classes that cover 95% of what you need.
Override CSS custom properties and everything updates. Dark mode is automatic via prefers-color-scheme, or toggle it with a class.
~8KB gzipped. No JavaScript runtime. No build step. No config files. One link tag and you're done.
When you need something custom, you write CSS — because you know CSS. grit gives you a starting point, not a straitjacket.
Quick Start
Components
Buttons, cards, modals, dropdowns, tabs, toggles, tooltips, alerts, badges, progress bars, avatars, skeletons, navbars, tables, forms — and more.
Examples
Full-page examples showing what you can build with a single CSS file and plain HTML.
Every component in grit.css on one page. Buttons, cards, forms, modals, tables, and more.
Full API reference with copy-paste code examples for every component, layout class, and theme.
A polished SaaS landing page with hero, features, pricing, testimonials, and CTA sections.
An admin dashboard with sidebar navigation, stat cards, tables, and charts layout.
Theming
grit.css respects prefers-color-scheme: dark automatically. No JavaScript toggle needed. Want manual control? Add .dark or .light to the body.
Override any CSS custom property and the entire framework updates. Change --grit-primary and every button, link, and accent color follows.
Or create your own — just override the CSS custom properties and every component updates automatically.
One file. 8KB. Zero build tools. Zero config. Beautiful defaults. Real components. Your CSS.