Layout primitives

Composable, framework-agnostic building blocks (.l-*) that replace hand-rolled flex/grid. Gap is token-driven via --gap (set inline or with .gap-1…7). Universal — available in every kit via base.css.

Stack .l-stack — vertical flow

.l-stack.gap-2
One
Two
Three
.l-stack.gap-4 (default)
One
Two
Three

Row .l-row — horizontal, wraps, .l-spacer pushes

.l-row.gap-3 with a trailing .l-spacer + alignment modifiers
Logo
Nav
Menu
Action
.l-row.between
Start
End

Grid .l-grid — responsive auto-fit, never overflows

.l-grid (default min col 16rem) — resize / mobile reflows automatically

Auto-fit

Columns wrap when they hit the min width.

min(--col,100%)

Caps at 100% so it can't overflow narrow viewports.

Token gap

Gap from the space scale via --gap.

No media queries

One declaration, intrinsically responsive.

Composition primitives nest

.l-container › .l-stack › (.l-row + .l-grid)
Title
Filter

A

B

C

Qazana Strata · layout primitives