VocabularyThe utilities too small for a page of their own. Every engine class is worn by a specimen; the vocabulary guard checks.
The content ladder.content-1 · .content-2 · .content-3 — a surface at a rung: 1 a column (40ch) · 2 reading (70ch) · 3 working (100ch); the dialog wears the same words.
.content-1 · a column
.content-2 · reading
.content-3 · working
Text
.centered — text-align: center
.nowrap — a line that never wraps, however long it grows, however narrow the card
.clip — the hugging column model's absorber: this cell gives way to its neighbours before it wraps them
.prelines — white-space: pre-line a second line, as written
.link — the link voice on any element · .clickable — the pointer's cursor on a span
Numbers312 ▲ 8%1,204 ▼ 3%44 — 0%.num-flat — quiet ink for a value that did not move
.numbermono, tabular, --digits wide (3); the value changes, nothing moves
Tiers.c-mobile · .c-tablet · .c-desktop gate on the container's width. Resize the window.
this container is narrow
this container is mid
this container is wide
Bento.bento — auto-fill cells of --cell, dense flow; .span-2 or .row-wide on a child; the span falls under two cells' width (drag the frame).
row-wide
span-2
1
2
span-2
3
Vertical rule.vr — hr stood on end: the inline-start edge of the element that begins a new column, hr's ink and weight, no track of its own.
Salesthe left column
Weatherthe right column, ruled
Grids.ngrid — an explicit grid of --cols × --rows; .hero — the cell that takes the whole row.
hero
1
2
3
Tree.tree — nested lists of links, the map of a settings area.
Grow.grow takes the leftover block space and stays shrinkable, so an inner .scroll-y scrolls.
a scrolling surface under a fixed head
the region does not scroll
the inner surface does
and the head stays
Lock.lock — an icon button whose shackle swings open as it is pressed; aria-pressed is the state (an EventOS record unlocks its editable surfaces with it).
Rail glyphs.nav-icon — the icon-only rail item; .drawer-grow — a drawer that takes its content's height.