Native first
Cascade Layers instead of specificity fights, Container Queries instead of media-query sprawl, native elements (<dialog>, <details>) instead of JS reimplementations wherever native behavior is enough.
NativeCSS Handbook
Overview
A native CSS design system with no build step: no LESS/Sass, no bundler, no preprocessor. @import + CSS Cascade Layers control load order, a single token system (tokens.css + colors.css) is the sole source of values.
Quick Start
<link rel="stylesheet" href="ncss.css">ncss.css imports everything else itself (tokens, reset, helpers, components) in the correct layer order. No build step needed - just include the file directly.
Core Principles
One source of truth
tokens.css/colors.css are the only places raw values (colors, rem, px) are allowed to live. Everything else references them via var().
No build step
@import + Cascade Layers handle everything. No preprocessor, no bundler, no compilation - load the file directly in the browser.
No utility sprawl
Small, curated utility sets instead of a Tailwind-style "a class for every CSS value" approach. New utilities are added only for real, recurring need.
Breakpointless by default
Typography and spacing are fluid by default (clamp()-based). Fixed breakpoints remain a deliberately sparingly used escape hatch.
Verify, don't assume
Every non-trivial change is checked in real browsers (Chromium, WebKit, Firefox) - browser support claims are researched, not guessed from training knowledge.
Web Awesome (optional)
Optionally the system connects via webawesome-bridge.css to a self-hosted Web Awesome, for cases where native HTML/CSS alone isn't enough (e.g. toast, carousel, drawer) - see Web Awesome Bridge.
Where to go next
- Architecture - Cascade Layers, file structure, how everything fits together.
- Theming - your own brand in a single file.
- Build Your Own Theme - step by step, with a ready-to-copy theme.css.
- Design Tokens - spacing, radius, shadow, motion.
- Component Reference - every component with its classes and tokens.
Live examples for every topic also live under Demo - this handbook explains the WHY and HOW, the demo pages show it in action.