A minimal CSS design system inspired by CUBE CSS, implemented with CSS Layers.
- Layered cascade — Uses
@layerfor specificity control, eliminating the need for BEM naming or!important - Static props, semantic themes — Raw tokens (
--size-1,--size-2,--blu-5) live in props layer; themes map them to semantic names (--space-sm,--color-pri). Swap one theme file to restyle everything. - Exceptions use classes, not
data-*— Reservesdata-*attributes for Datastar integration - Minimal media queries — Layout uses intrinsic sizing (hero grid, auto-fit/fill) to adapt without breakpoints
@layer reset, props, theme, composition, utility, block, exception;Each layer increases in specificity. Later layers override earlier ones without specificity wars.
| File | Layer | Purpose |
|---|---|---|
0_reset.css |
reset | Minimal normalize |
1_props.css |
props | Raw design tokens (colors, sizes, shadows, fonts) |
2_theme-*.css |
theme | Semantic mapping with t-shirt sizes, swappable |
3_composition.css |
composition | Layout primitives |
4_utility.css |
utility | Single-purpose modifiers |
5_block.css |
block | Components |
6_exception.css |
exception | Variants, sizes, states |
Composition + utility classes for layout. Pattern: composition:variant + utilities.
<div class="flex:stack gap:md align:center">...</div>
<div class="grid:hero gap:xs">...</div>
<div class="flex:cluster gap:sm wrap">...</div>Composition sets the layout mode; utilities modify spacing, alignment, wrapping.
See layout.html for full API documentation.
Component classes. Pattern: block:variant-exception.
<button class="btn:pri">Primary</button>
<button class="btn:dgr-sm">Small Danger</button>
<button class="btn:pri out">Primary Outline</button>
<span class="chip:inf-sm">Info</span>- Block — Component name (
btn,chip,card) - Variant — Style variation (
pri,sec,dgr,inf) - Exception — Size or modifier suffix (
-sm,-lg) - Modifiers — Separate classes that combine with variants (
out)
See individual component pages (button.html, chips.html, etc.) for API documentation.
Default structure uses a fullscreen hero grid for app-like layouts:
┌─────────────────────────────────────┐
│ header │
├──────┬──────────────────────┬───────┤
│ │ │ │
│ nav │ main │ aside │
│ │ │ │
├──────┴──────────────────────┴───────┤
│ footer │
└─────────────────────────────────────┘
<body class="fullscreen scroll-no">
<div class="grid:hero gap:xs">
<header>...</header>
<nav class="desktop">...</nav>
<main class="scroll-y">...</main>
<aside>...</aside>
<footer>...</footer>
</div>
</body>- Nav/aside/footer — Use
<dialog popover>drawers on mobile, inline on desktop - No z-index tracking — Drawers use top-layer via popover API
- 4-column forms — Max columns that work on all screen sizes without media queries
Themes are single CSS files. Switch by changing the <link>:
<link rel="stylesheet" href="./css/2_theme-default.css">With Datastar persistence:
<link rel="stylesheet" data-attr:href="$prst_theme">This system is designed for use with Datastar. Key integrations:
- Theme/mode switching via signals and
data-attr - Partial loading with
data-init="@get('./partials/nav.html')" - Signal persistence with
data-persist data-*reserved — Exceptions use class selectors, not data attributes
Component API documentation lives in individual HTML pages that serve as both docs and visual tests:
- button.html — Button component
- icon_btn.html — Icon button
- chips.html — Chip/tag component
- cards.html — Card component
- forms.html — Form layout and inputs
- layout.html — Composition and utility classes
- colors.html — Color palette