edwardtufte/tufte-css

Features

• Tufte-Inspired Styles - Applies Edward Tufte's distinctive handout style with well-set typography, extensive sidenotes, and tight graphic integration.
• Web Styling and UI - Applies clean, serif-based typography, off-white background, and minimal color for a print-inspired web layout.
• Flat Heading Hierarchies - Enforces a flat heading hierarchy with only two heading levels inside sections for simple, linear document structure.
• Document Typography Systems - Applies a clean, serif-based typographic system and generous page layout to HTML documents.
• Margin Note Systems - Places footnotes and asides in the page margin, keeping secondary information close to the text without disrupting flow.
• Code Block Styling - Renders inline and block code in a distinct monospace font with subtle background shading for readability.
• Captioned Figures - Provides CSS styles for embedding images and tables inline with descriptive captions that integrate tightly with surrounding text.
• Epigraph Styling - Provides CSS rules for formatting blockquote elements as chapter-opening epigraphs with italicized text and source attribution.
• Epigraph Styling - Ships CSS rules that format blockquote elements as chapter-opening epigraphs with italicized text and source attribution.
• Print-Inspired Typography Systems - Applies Edward Tufte's distinctive handout aesthetic—serif typography, generous margins, and tight graphic integration—to HTML documents.
• Full-Width Figure Floats - Places images and tables at full column width by overriding container widths with CSS float and margin properties.
• Sidenote Layout Systems - Positions footnotes and asides in the page margin alongside the main text, keeping secondary information accessible without disrupting reading flow.
• Sidenote Positioning - Provides CSS classes that position margin notes alongside the main text column using floats and negative margins.
• Print-Inspired Layout Systems - Provides a CSS toolkit that produces clean, serif-based typography, off-white backgrounds, and minimal color for readable, book-like web articles.
• Print-Inspired Systems - Applies a serif font stack, generous line-height, and off-white background to replicate print-book aesthetics.
• Responsive Margin Collapse - Ships CSS media queries that collapse margin notes into inline footnotes on narrow screens without JavaScript.
• Sidenote-Enabled Frameworks - Provides a stylesheet that positions footnotes and asides in the page margin, keeping secondary information close to the text without disrupting flow.
• Print-Inspired Typography Systems - Applies Edward Tufte's print-inspired serif typography, generous margins, and minimal color to HTML documents for readable layouts.
• Epigraph Displays - Styles blockquote elements as chapter-opening quotes with italicized text and a source footer.
• Heading Editors - Uses only two heading levels inside sections to encourage a simple, linear document structure.
• Flat Hierarchy Constraints - Enforces a shallow heading hierarchy by restricting sections to only h2 and h3 levels.
• Minimal Palettes - Uses only black, white, and a single red accent color to maintain a restrained, print-inspired visual tone.
• Epigraph Styles - Provides blockquote styling for chapter-opening epigraphs with italic text and right-aligned source attribution.
• CSS Frameworks - Styles for academic-style handouts and documents.
• Specialized Frameworks - Styles for creating academic-style handouts and documents.

Star history