Container and stacks
Page width is φ⁹ rem; text measure is 40ch·φ. Stack and cluster carry the rhythm.
Examples
Container sizes
s · φ⁸ ≈ 47rem
m · φ⁹ ≈ 76rem
l · 96rem
full
Stack and cluster
clusterwrapsinlineend
stack
vertical
Divided stack · data-divided
Frame
Aspect and margins.
Colour
Palette and opacity.
Labels
Numbers and names.
Section and golden
φ : 1
Anatomy
.container | Centres a block at the page width (--ae-container, φ⁹ ≈ 76rem) and keeps a gutter on each side when the viewport is narrower. |
.measure | Caps a block at the text measure (--ae-measure, 40ch·φ ≈ 65ch). Use it for running text outside .prose. |
.stack | Vertical flex column, one unit (--ae-space-4) between children. Change the gap with .gap-1 … .gap-8. With data-divided, a hairline between children. |
.cluster | Flex row that wraps and centres items vertically, with a gap of 1/φ unit. Also takes .gap-n. |
> .end | On an item in a cluster (or any flex row): pushes it and everything after it to the end. |
.section | Vertical rhythm between page bands: block padding of φ³ rem (--ae-space-7) above and below. |
.golden | Any box at the golden ratio: aspect-ratio φ : 1 (--ae-ratio). |
API
| Attribute | Values | Description |
|---|---|---|
data-sizeon .container | slfull | Narrower or wider page. Default φ⁹ ≈ 76rem; s is φ⁸ ≈ 47rem, l φ^9.5 ≈ 97rem, full the whole width less the gutters. |
--ae-containeron .container | <length> | Any other cap width. This is what s and l set. |
data-dividedon .stack | boolean | Divides the children with a hairline: every child after the first gets the line along its top. data-divided sets its own step, φ ≈ 1.6 units (--ae-space-5), on both sides of the line; a .gap-n changes only the space above it. A border, not a shadow, so a child's own shadow is kept. |
--ae-measureon .measure | <length> | Any other line length. Default 40ch·φ. |
Accessibility
- These are layout only: they add no landmarks or roles. Put the page's
<main>,<header>and<section>elements inside or around them. - Stacks and clusters keep source order, so reading and tab order match what is seen. Keep
.measureon long text so lines stay readable at any zoom.