Skip to content
Style your webpage like Edward Tufte’s handouts.
HTML CSS
Branch: gh-pages
Clone or download

Latest commit

daveliepmann Document deployment process
Closes #122 because this is our preferred method.
Latest commit c414b91 Sep 2, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
et-book Rename font files to et-book per @edwardtufte's request Oct 18, 2015
img Optimize all images Nov 6, 2017
LICENSE Initial commit Oct 15, 2014
README.md Document deployment process Sep 2, 2019
index.html Nix advice to use only color to denote links Jul 8, 2019
latex.css Fix text-shadow for latex Nov 15, 2015
package.json Document deployment process Sep 2, 2019
tufte.css `font-display: swap` for FOPST instead of FOUT/FOIT Sep 2, 2019
tufte.min.css `font-display: swap` for FOPST instead of FOUT/FOIT Sep 2, 2019

README.md

Tufte CSS

Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents.

This project is directly inspired by and based on Tufte-LaTeX and the R Markdown Tufte Handout.

Getting Started

The file index.html is a self-describing demonstration document that walks through the features of Tufte CSS. The live version at https://edwardtufte.github.io/tufte-css/ is the best overview of the project.

To use Tufte CSS, just copy tufte.css and the et-book font directory to your project and add the following to your HTML doc's head block:

<link rel="stylesheet" href="tufte.css"/>

All other files in the repository can be ignored, as they are merely used by the demonstration document.

Project Scope and Status

Tufte CSS is specifically a CSS-only solution for styling HTML for the web.

That means that JavaScript solutions, although often superior to pure CSS, are out of scope for this project and will not be used. Also out of scope are handling printed versions of web pages and integration with static site generators or other formats. Thankfully, all these useful applications can be well served by separate work that builds on top of Tufte CSS.

This project is maintained but not under active development. It is considered essentially feature-complete. Refactoring and new functionality are a very low priority. However, contributions are still welcome to fix bugs or add functionality.

Deploying

  1. Make changes
  2. From shell, invoke clean-css-cli: cleancss -o tufte.min.css tufte.css
  3. Bump version in package.json
  4. From shell: npm publish

Contributing

If you notice something wrong or broken, let us know by opening an issue, or better yet, a pull request with how you think it should be fixed.

Please document your issues and fixes thoroughly. This means a clear description of the concern, steps on how to reproduce it, and (if possible) before and after screenshots and links to prior discussions or commits. Please keep pull requests to one change at a time.

Fixes and new functionality should be tested against index.html on screens as small as an iPhone 4 and as big as, well, as big as you use normally. (If you don't have a mobile device handy, fake different devices with your browser's developer tools.)

See the Issues page, especially Help Wanted, for opportunities to contribute.

Contributors

License

Released under the MIT license. See LICENSE.

You can’t perform that action at this time.