Article

A long read as a chapter of a hand-drawn walker's guide: a column at reading width, a pen drawing that bleeds past it, notes in the margin, a contents list with the walk's height profile beside it, and a bar that shows how far along you are.

The breakout is the page. Its paragraphs sit in the reading column, the plates carry data-bleed, and each aside carries data-note, so at a wide width it moves into the margin beside its paragraph. A narrow sidebar puts the contents beside it, data-sticky: a toc whose current section toc.js marks in red pencil, and the walk's height profile drawn under it, down which a dot travels as you scroll. The progress bar at the top is data-scroll, and the last line is print, for paper only. The world is its own, a pen-and-ink guide, made of a theme of Yeti tokens and a short stylesheet for what Yeti has no token for; the drawings are generated by a script.

Open in new tab

Or drag the box's corner to see the page at any width. It is written with nothing but Yeti's classes and attributes, and every element on it is validated against the manifest the way each demo on this site is.