Layout
Stateless containers that arrange children. Each does one thing. They stack.
The page
Wrap your application root in body.page to get an eleven-slot grid. Only pg-main is required — omit any other slot and its track collapses. This very page uses it: banner, header, subheader, navigation, main, aside, footer.
<body class="page stage">
<div class="pg-banner">…</div>
<div class="pg-header">…</div>
<div class="pg-subheader">…</div>
<nav class="pg-navigation">…</nav>
<main class="pg-main">…</main>
<aside class="pg-aside">…</aside>
<div class="pg-footer">…</div>
</body>Banner, header, subheader stack at the top. Navigation, main, and aside share the middle band — only those three scroll. Footer pins at the bottom.
Flow — .row and .column
Lay children out in a line. .row goes horizontal and wraps; .column goes vertical. Gaps derive from the ambient type.
Distribute — .split and .spread
.split is a rigid 50/50 grid. .spread sizes children to their content and pushes the slack into the gap.
Three-region — .lcr and .tmb
.lcr places three children left / center / right. .tmb does the same vertically: top / middle / bottom. The page header on this site is an .lcr.
Flank — one fixed, one fills
.flank sizes the first child to its content and lets the last fill. .flank-end reverses it — first fills, last is fixed.
Grid — responsive auto-fit
Children fill the row and wrap to a new row when they would shrink below --grid-min. Resize the window to watch it reflow.
HUD — floating anchors
.hud-overlay stacks every child in one shared cell, each pinned by a directional class. Siblings are independent — a big corner panel cannot push a centered child off-axis. It needs a sized container to anchor against; here, an image.
<div class="hud-overlay">
<img src="…">
<span class="↖">REC ●</span>
<span class="•">focus</span>
<span class="↘">−2.5 °F</span>
</div>The image gives the overlay its dimensions; the chips float at their anchors on top. The same nine anchor classes — ↖ ↑ ↗ ← • → ↙ ↓ ↘ — also drive .hud-grid, which gives each child its own cell instead of overlaying them.
Responsive utilities
Three classes gate an element to a viewport range: .mobile (under 480px), .tablet (480–1024px), .desktop (1024px and up). They are additive — combine them to express a span. An element with none of them shows everywhere.
<nav class="desktop">…full sidebar…</nav>
<nav class="mobile tablet">…compact menu…</nav>
<span>…shows at every width…</span>The classes work on any element regardless of its natural display type. A hidden <nav> returns to a block when its range matches; a hidden <span> returns to inline. Each element reverts to its own correct display — you never specify it.
One caution: don't put a viewport class and a layout primitive on the same element — both want to control display and the viewport class wins. Wrap the content in a child and put the primitive on the wrapper.
Hero — 5-slot panel
A panel with optional top, bottom, left, right, and a scrolling main. Omit any edge slot and its track collapses. Use inside drawers, modals, or any container that needs chrome around scrolling content.
<div class="hero">
<div class="top">…</div>
<div class="left">…</div>
<div class="main">…</div>
<div class="right">…</div>
<div class="bottom">…</div>
</div>