Article

A long read: a column at reading width, a picture that bleeds past it, a note in the margin, a table of contents that follows the reader, and a bar that shows how far they are.

The breakout is the page. Its paragraphs sit in the reading column, the frame carries data-bleed, and the aside carries data-note, so at a wide width it moves into the margin beside its paragraph. A sidebar puts the toc beside it, data-sticky, and toc.js marks the heading in view. The progress bar at the top is data-scroll, and the last line is print, for paper only.

Drag the box's corner to see the page at any width, or open the page on its own. 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.