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>

Features

Standards compliant and accessible HTML

Semantic elements and proper landmarks — equally readable to browsers and screen readers.

Intuitive layout system

Pixel perfect layout with no fuss. 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, resulting in much smaller downloads.

Design system friendly

Because you never style elements one by one, the look stays consistent across the whole site and is easy to specify in one place.

Get started

Browse the components →

Page, layout, navigation, content, buttons, forms and tables.

Download →

Grab the single stylesheet and a starter template.

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.