Layout
Five composable primitives plus Copy, one space ratio, and a measure axiom. Compose these instead of writing bespoke margin stacks or a breakpoint for every block. Next, Pieces put these on controls. Then Pages compose a landing.
Axioms
Measure
No reading line exceeds --cds-measure. Set it in
ch so the cap tracks font size. Flow text is
capped; structural shells are not.
Suggestion over prescription
Prefer max-inline-size, gap, and
flex-basis over fixed width and height, so content
is never clipped.
One ratio
--cds-ratio seeds space from 1rem. Larger steps
multiply; sub-body steps stay for chrome.
Boxes
Global border-box, logical properties, and
content-box on reading columns so
ch measures text, not padding.
The approach follows the intrinsic-layout ideas in Every Layout by Heydon Pickering and Andy Bell.
Primitives
Stack
.cds-stack · --sm / --md / --lg · even gap, like items only
Copy
Title sits with the lede
The button is a new thought, so it gets more air.
.cds-copy · proximity, not one gap
Cluster
.cds-cluster · --center / --between
Grid
.cds-grid · wraps at --cds-grid-min · --center for stats · --five for five even tracks
Center
A centred column stops at the measure, so the reading line stays honest even when the shell is wide.
.cds-center · --gutter
Split
.cds-split · wraps at --cds-split-min
Space scale
| Step | Value | Use |
|---|---|---|
1–3 | 4 / 8 / 12px | Chrome only: control padding, tight gaps |
4 | 16px | Base step, seeds the ratio |
5 | 24px | Default stack gap, card padding |
6–8 | 36 / 54 / 81px | Section rhythm, page bands |
--cds-ratio 1.5 · steps 5–8 multiply
Shape and depth
Border only
The quiet default for most modules.
Light shadow
--cds-shadow for cards on the page wash.
Lifted
--cds-shadow-md only when something floats.