Stylesheet.css
Standards compliant, design system friendly
Tired of code that looks like this?
<div class="flex items-center justify-between
gap-4 px-6 py-4 bg-white rounded-xl
shadow-md border border-slate-200">
<h2 class="text-xl font-bold tracking-tight
text-slate-900">Title</h2>
<button class="inline-flex items-center px-4
py-2 rounded-lg bg-indigo-600 text-white
font-medium hover:bg-indigo-700">Save</button>
</div>
Your code can look like this instead.
<div class="row panel">
<h2>Title</h2>
<span class="stretch"></span>
<button>Save</button>
</div>Standards compliant and accessible HTML
Semantic elements and proper landmarks — equally readable to browsers and screen readers.
Intuitive layout system
Rows, columns, grids and flow — spaced by the container, with a single stretch for the rest.
Minimal classes
A class only where HTML has no element for the job; everything else is a bare tag.
No JavaScript necessary
Menus, dropdowns and other interactions are pure HTML and CSS.
Get started
Components
Page
The header / main / footer shell and the heading rules.
Layout
Rows, columns, grids, flow, and the stretch model.
Navigation
Stacked bars, dropdowns, sidebar menus, paging.
Content
Headings, text, lists, code, quotes.
Cards
Plain and linkable content cards.
Buttons
Variants, sizes, and groups.
Forms
Inputs, labels, selects, and fieldsets.
Tables
Data tables with headers and row hover.
Other
Inline chips and status banners.