nimble.css — Classless CSS in ~3.4 KB

Demos

HTML5 Test Page — every standard HTML element
Extended Demo — layouts, utilities, button variants, dark mode toggle
Pico-style Demo — classic kitchen-sink showcase inspired by Pico CSS

Features

Classless — every standard HTML element elegantly styled without classes
Dark mode — included (automatic and manual)
Cascade layers — plays nicely alongside your own styles
Tiny — core is only ~3.4 KB brotli (15.9 KB minified)

Quick Start

npm install @leftium/nimble.css

Then import in your CSS, JS, or framework:

/* CSS */
@import '@leftium/nimble.css';

// JS / framework entry point
import '@leftium/nimble.css';

Or use CDN

Via jsDelivr (npm):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble.min.css">

For 3.4 KB core size

nimble.min.css (19.4 KB) includes everything.

To trim size, use nimble-core.min.css (15.9 KB) + only the add-ons you need:

Add-on	Size
`nimble-progress.min.css`	1.6 KB
`nimble-meter.min.css`	1.0 KB
`nimble-select.min.css`	1.0 KB

That's it. Write semantic HTML and it just works.

Customization

Override CSS custom properties at runtime — no build step needed. Hover and focus states auto-derive from the base color.

:root {
  --nc-surface-hue: 150;
  --nc-primary: light-dark(oklch(0.5 0.2 150), oklch(0.6 0.2 150));
  --nc-radius: 0.5rem;
  --nc-spacing: 1.25rem;
}

See the README for the full list of config variables.