HackerSqueeze — AI‑curated tech & startup insights

Tufte CSS By Dave Liepmann --- Overview Tufte CSS is a styling toolkit inspired by Edward Tufte’s print books and handouts, known for simplicity, rich sidenote usage, graphic-text integration, and refined typography. Created by Dave Liepmann and now an official Edward Tufte project, it draws heavily from Tufte-LaTeX and R Markdown’s Tufte Handout format. The goal is not to replicate print but to borrow effective techniques from Tufte’s print design and adapt them for the web — providing a flexible starting point rather than a strict template. Contributions are welcome on the GitHub project following the contribution guidelines. --- Getting Started Copy tufte.css and the et-book fonts directory to your project. Include in your HTML : Use the CSS classes and conventions described for best effect; inspect and view source frequently. --- Fundamentals Sections and Headings Structure content inside an within . Use for logical text groupings. Heading hierarchy: for title, for subtitle, for section heads, for sub-sections. Avoid headings below level 3; try design clarity instead of deeper levels. Blockquotes use semantic HTML and elements, lightly styled. Text and Typography Uses off-white (#fffff8) background and off-black (#111111) text to reduce harsh contrast. Default font is ETBook (open-source), referencing Monotype Bembo’s style; falls back gracefully to Palatino, Georgia. Includes separate font files for bold and italic rather than browser simulations. Sans-serif option available with .sans class (uses Gill Sans). Links: Colored like body text, Underlined to indicate clickability, No color change on hover or click. Design choices emphasize readability and subtlety; alternatives possible. --- Epigraphs Epigraphs are introductory quotes styled in italic inside with source in . Multiple epigraphs can be grouped inside a wrapper with class .epigraph. Modeled after Tufte’s chapter epigraphs, e.g. in Beautiful Evidence. --- Sidenotes: Footnotes and Marginal Notes Unique hallmark: sidenotes appear in the margin rather than bottom of page. On large screens, sidenotes appear in margins; on smaller screens, they toggle visibility. Structure: Inline superscript reference with + checkbox, Sidenote content in adjacent . IDs must be consistent for pairing label and checkbox (sn- prefix recommended). Margin notes are similar but omit the number and use different toggle symbols (e.g., ⊕, ⊕) for smaller viewports. Figures can also be placed as margin notes. Example sidenote code snippet: Example margin note code snippet: --- Figures Figures are tightly integrated within text using . Do not wrap figures in tags. Labels or margin notes accompany figures using margin note markup inside . Full-width figures use .fullwidth class inside for nearly screen-wide width. Margin figures use margin notes inside for ancillary visuals. An .iframe-wrapper class helps contain embedded content like YouTube videos responsively. Example for YouTube