Compositions — every layout is these helpers composing No new classes, ever (gf-185, the law): pages are explicit declarative HTML from these composition helpers + the style API knobs. If a layout can't be said with them, that's a conversation about evolving a helper — never a bespoke class.
Compositions Every layout is these helpers composing. Drag any box's corner — the compositions are width-driven, and the tier gates re-compose content per container.
.row (wraps by default)
alphabetagammadelta
.row.oneline (shrinks, never wraps)alphabetagamma
.spread — ends push apart
leftright
.lcr — left · center · rightLCR
.split — two equal cellsonetwo
.grid (--grid-min: 6rem)
abcd
.track — one scrolling rowjanfebmaraprmay
.card — a line, a republished surface
card
.Card — the focused card.surface inside — one lift step, no line
.Surface inside — two lift steps
Card
.surface on the canvascolumn surfacethe glyph above the line, no border
tier gates: .small / .medium / .large small — under 8rem medium — 8 to 20rem large — 20rem and up
ONE element, gated children: the glyph is unconditional (stable box, never moves), only the label is tiered — revert-layer restores each child's own display
The process strip — the crumb trail, stepped Zero new classes (gf-185, the law) — and zero new ELEMENTS: the house breadcrumb IS "this, then that" (per Mike), so the wizard strip is a .crumbs trail with a numbered-ring glyph per station that swaps to a ringed check when done. aria-current="step" wears the trail's active ink; the done station behind the active one is the BACK link; future stations dim. This bench caught two earlier shapes (a vertical rail; a spread over a progress bar) before product did.
The strip anatomy The real wizStrip, server-rendered: done (ringed check, quiet) · active (aria-current="step") · future (numbered ring, dimmed). The import and connector wizards render exactly this.First station active · last station reached:
The stepped dialog — working mock Four stations on a page-local signal; strip, bar and body all read it. Done stations are clickable. Watch the frame between steps — it must not resize.
The hud's nine slots .hud is a fixed grid with one area; a child's slot class (.tl .tc .tr .cl .cc .cr .bl .bc .br) is its place-self. The public shell is the living one (publicHud); here the viewport is a stage — drag its corner, click a slot.
place-self:
The guide .guide — the section-index synopsis page: a reading measure, generous block rhythm; parts are .guide-part rows.
1
A partIts synopsis.
The wash .wash — a fixed underlay of two pools in the surface's colour, the second a ladder step up; the public pages' tint. Painted inside this card for the shelf.
The pools sit at the top-left and the bottom-right of the viewport; a card on top of them reads the tint through its glass.
Glass .glass — the surface at --glass-alpha over a --glass-blur of what is behind it. 0.65 is a dialog over its dimmed backdrop; a toast wears 0.75 — it shows what is behind it, a little; a hud card that must read over anything 0.88. Quiet is ink (--fg), never opacity on the card: opacity multiplies into the glass and the words go with it.
busy content behind the glass busy content behind the glass
0.4sees through
0.65a dialog
0.75a toast
0.88 readquiet ink
County map .county-map — census outlines as hairlines at any size; .on is the selected county. The territory picker (gf-364) paints by --fg groups instead; this keeps the recipe demoed.data-ui-state="glance" — the read-only glance: 10lh tall, as wide as its cell, no pointer.
App icon .app-icon (gf-407) — the home's tile: the glyph alone in a .fab-2 squircle (hover lifts it, never pressed), the word floating beneath, the badge on the corner, its own 5em size (four across a phone). What the nav rail is on a wider screen; distinct from .nav-icon, the rail's flat tile. Sits centred in a .grid's equal columns; aria-current lights one.
The hero cell .grid > .row-wide — one child takes the whole row; the rest pack under it.
row-wide
cell
cell
Floating buttons, three weights .fab-1 glass · .fab-2 the standard trigger · .fab-3 the glow pole. Slotless here, so the margin shows. .btn-touch — a button that guarantees the 44px touch target.
Flank, both ends Three rows, one content: a tag and a card. The pinned cell keeps its own width; the growing cell takes the rest and wraps inside it. Drag the card's corner to see which end holds.
.flank — pins the FIRST cell, the last growsfirst · pinnedlast · grows — a sentence long enough to wrap once the card is dragged narrow
.flank-start — the same pair, spelled from the startfirst · pinnedlast · grows — a sentence long enough to wrap once the card is dragged narrow
.flank-end — pins the LAST cell, the first growsfirst · grows — a sentence long enough to wrap once the card is dragged narrowlast · pinned
Kind identity and print .is-event and .is-activation shift the hue ∓30 so the two kinds read as related; .np hides a thing on paper.
eventactivationnot printed
Table scroll .table-scroll — a bounded box a table scrolls inside, the border on the box, none on the table.
| brand | cases |
|---|---|
| Bud Light | 24 |
| Michelob Ultra | 12 |
The calendar's parts .cal-shell the month-plus-side grid · .cal-cards the side list · .cal-legend a chip with its ink · .cal-assets the icons at a day's foot.
the month
events
activations
The map layer Static SVG maps live in TerritoryMapSVG / TerritoryStateSVG (the territory picker) and real-world maps in the mini-map and google-maps rockets; nothing outside this shelf wears the old home-map words. Kept as the dictionary entry: .il-map-box the frame (it fills a SIZE container) · .ctx-state a neighbour · .il-outline the rim · .il-county the counties (data-sel the territory) · .mark-glass + .wh-mark a warehouse · .map-dot / .dot-core an event · .place-dot a town · .map-label with .place-label, .county-label, .pin-label.
Blocks — the self-managing cell (gf-608) .block is a SIZE container with one child, its body: a column in portrait, a row in landscape (wider than 3:2) — the words first, the big thing beside them. Inside it the tiers gate on the width (.small/.medium/.large), .c-portrait/.c-landscape on the orientation and .c-short/.c-tall on the height — the map stands down in a short cell, the address in a narrow one. A block never sizes itself: a grid track, a .frame (at any --ratio) or a .stress hands it its cell. Drag the stress corner both ways.
◎⧉
Zilker Park Austin, TX 78746 landscape · stressportrait · stressshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · barportrait · barshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · squareportrait · squareshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · tallportrait · tallshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · wideportrait · wideshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · narrowportrait · narrowshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · tinyportrait · tinyshort: no map◎⧉
Zilker Park Austin, TX 78746 landscape · sliverportrait · slivershort: no map