Timeline
An ordered sequence with a rail through it — vertical or horizontal, four modifiers, state in ARIA, and it prints. The generic form the curriculum, build log and itinerary are all dressings of.
An ordered sequence with a rail through it. 27-composite.css opens by saying its four organs are "the same idea — an ordered list that knows where you are — wearing its collection's clothes"; this is that idea with no clothes on, so a page that needs a plain sequence does not borrow a build log and override every part that says project.
The axis is the only structural decision
Vertical reads as a list and takes any length. Horizontal reads as a process, is bounded, scrolls rather than wraps — a horizontal timeline that wraps to a second row has stopped being one line of time — and folds back to vertical under 48rem rather than crushing itself.
- Jun 2024Foundation tokens land
Three tiers, one rename away from a rebrand.
- 2Sep 2024Components pass
- 3NowCollections and pages
Twelve collections on one shared shell.
- Q4Ship v1 to npm
.tl — vertical, the default
- Jun 2024Foundation tokens land
Three tiers, one rename away from a rebrand.
- 2Sep 2024Components pass
- 3NowCollections and pages
Twelve collections on one shared shell.
- Q4Ship v1 to npm
.tl.tl-h — horizontal. Narrow this window past 48rem and it becomes the one above
State is ARIA, never a styling class
The node fills behind you, takes the accent ring where you are, and goes dashed ahead of you — so "how far along is this" survives with CSS off, and the accessibility tree and the styling can never disagree.
| Hook | What it does |
|---|---|
[data-done] | behind you — the node fills and shows a tick |
aria-current="step" | you are here — accent ring. step, not true: this is a position in a process, not the current page |
[data-kind] | start ▸ · ship ✓ · now filled accent. Glyph only — the node geometry never changes |
~ selector | everything after the current item recedes automatically. No class on the future items |
Four modifiers, both axes
- Jun 2024Foundation tokens land
Three tiers, one rename away from a rebrand.
- 2Sep 2024Components pass
- 3NowCollections and pages
Twelve collections on one shared shell.
.tl-compact — tighter rhythm, no notes expected. For a rail beside content
- 2021 — 2024Senior Product Engineer
Design systems, and the sites that run on them.
- 2019 — 2021Frontend Engineer
Component library, then the migration onto it.
.tl-ranged — the node becomes a capsule that fills its row. A role held for three years is a bar, not a dot, which is what makes a CV read as duration
- Jun 2024Foundation tokens land
Three tiers, one rename away from a rebrand.
- 2Sep 2024Components pass
- 3NowCollections and pages
Twelve collections on one shared shell.
- Q4Ship v1 to npm
.tl-alt — items alternate sides of a centred rail. Vertical only, and only above 48rem; below that it collapses to the plain rail rather than shrinking two columns into nothing
- Jun 2024Foundation tokens land
Three tiers, one rename away from a rebrand.
- 2Sep 2024Components pass
- 3NowCollections and pages
Twelve collections on one shared shell.
.tl-lg — roomier, for the three or four milestones that actually matter
Who wears which clothes
The three collection composites are not replaced by this — each keeps a device that is genuinely about its subject. This is what to reach for when you have none of those subjects.
| Reach for | When |
|---|---|
| a plain sequence — a roadmap, a changelog, a career history, "what happens next" |
| a project — ▸ start, numbered middles, ✓ ship. Projects → build log |
| a trip — the day chip and a photo strip per day. Travel → itinerary |
| a course — collapsible modules, tickable lesson rows. Course → curriculum |
| a collection's own series spine — already in collection.css, used by trips, seasons and the archive |
It prints
Horizontal folds to vertical, alternating collapses to one column, and the accent ring drops — a résumé is the most likely thing to be printed, and a two-column zig-zag does not survive a page break.