Every layout mechanism the POC ships, rendered live against dist/preset/full.css (the full barrel — variables + base + utilities + grid). Switch theme modes to see each primitive re-theme.
Flexbox/intrinsic, token-bound, container-query-free. Each re-themes with the mode switcher.
.Dual-Stack — vertical rhythm between siblings--dual-stack-space gap; modifiers --sm / --lg / --xl..Dual-Cluster — wrapping inline group--between / --center justify modifiers..Dual-Sidebar — fixed side + fluid main, collapses (no media query).Dual-Switcher — row ↔ column at a threshold (no media query)--dual-switcher-threshold (30rem) — shrink the window to see it..Dual-Center — max-width content column (bound to a content-measure token)--dual-size-content-medium, 68ch), auto side margins..Dual-Reel — horizontal scroll strip.Dual-Cover — vertical centering with header/footer room.Dual-Box — padded container with a token border (NEW — completes the set)--dual-box-pad inset and a token border. Content sits inside the padding..Dual-Frame — aspect-ratio media box (NEW)aspect-ratio (--dual-frame-ratio); children cover-fit..Dual-Imposter — overlay/center on a positioned ancestor (NEW).FlexGrid — modern gap gutter + gap-aware calc() cells (flexbox)gap; cell widths subtract it via calc()..CssGrid — CSS Grid, 12-col track + spans.CssGrid--bento — dense auto-flow with hero/wide cells.CssGrid--autoFit — intrinsic responsive, no media queriesrepeat(auto-fit, minmax(16rem, 1fr)) — reflows on width alone.Content-measure caps (--dual-size-content-*, ch-based), fluid clamp() sizes (--dual-size-fluid-*), and the dual-space($n) multiplier for an arbitrary step off the --dual-spacing base.
dual-space(3) = calc(var(--dual-spacing) × 3)The theme() mixin now emits both the root .dual-theme-* class and a [data-dual-theme="…"] attribute selector, so a subtree can switch mode independently of the page. The three panels below each carry their own data-dual-theme — the page mode does not touch them.
iris-ui-theme-* class names; this attribute form is the portable pattern.The --dual-layout-* tier + responsive typography shift per breakpoint (544 / 768 / 1024 / 1440 / 1920). Drag the frame's right edge; the readout shows the active breakpoint.
The layout system is four layers that compose — base (element defaults) + variables (the --dual-* vars everything reads) + utilities (u-* single-purpose classes) + grid/primitives (.FlexGrid/.CssGrid/.Dual-*). One realistic composition using all four at once — a card grid where each cell stacks content, spaced by utilities, themed by the variable layer:
CssGrid--autoFit lays the cells; Dual-Box pads; Dual-Stack spaces the children.
u-flexJustifyBetween row inside a grid cell — utilities handle the micro-layout the grid does not.
base element styles; every color reads the --dual-* variable layer, so this whole grid re-themes with the mode switcher above.
| Layer | Provides | Combines with |
|---|---|---|
variables | --dual-* values every other layer reads | the base of all three below |
base | element defaults (h1–h6, p, reset) | sits under utilities + grid; no class needed |
utilities | u-flex, u-gap-*, u-flexJustify* — micro-layout | inside grid cells + primitives |
grid / primitives | .FlexGrid/.CssGrid macro-layout + .Dual-* primitives | nest freely (grid → box → stack → utilities) |
See SCSS Structure for how these layers are authored, and CSS Overview for the whole POC.