A page that keeps its composition on every screen
Within a step of the ladder the page scales as a whole, like a picture: nothing moves relative to anything. Between steps the relations fold by themselves. Body text never falls below the reader's own size, and zoom makes it larger.
Three parts
The core
One stylesheet: the ladder of steps, tokens, plain HTML styled, and eight relations.
readyThe manifest
The whole vocabulary on one page, small enough to stay in an agent's context.
readyThe check
Renders the page at both edges of every step and says what moved or broke.
readyThemes
Values only: a theme changes colours and type, never the composition.
next
Steps9
Relations8
Text, at least1 em
The ladder
| Step | Window | Typical screen | Body text |
|---|---|---|---|
| 20 | 320–399 px | Small phone | 16–20 px |
| 25 | 400–511 px | Large phone | 16–20 px |
| 40 | 640–799 px | Small tablet | 16–20 px |
| 64 | 1024–1279 px | Tablet, small laptop | 16–20 px |
| 80 | 1280–1599 px | Laptop | 16–20 px |
| 128 | 2048 px and wider | Large display | 16 px and up |