Tufte Bootstrap

Edward Tufte uses distinctive, simple, well-set typography; extensive sidenotes; and tight integration of graphics and charts. Tufte Bootstrap brings Tufte's style to the Bootstrap framework.

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

If you see anything that Tufte Bootstrap could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-bootstrap.

Getting Started

Since this project stands atop Bootstrap's giant shoulders, it assumes your HTML5 already employs Bootstrap, whose starter template is a good guide to getting started.

To add Tufte Bootstrap, copy tufte-bootstrap.css and the assets directory to your project directory, then add the following to your HTML document’s head block:

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

Now you just have to use the markup conventions described in this document. For best results, View Source and Inspect Element frequently.

Fundamentals

Sections and Headings

Organize your document with an article element inside your body tag. Inside that, use section tags around each logical grouping of text and headings.

Tufte CSS uses h1 for the document title, p with class lead for the document subtitle, h2 for section headings, and h3 for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:

The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.

[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.

As a bonus, this excerpt regarding the use of headings provides an example of block quotes. In Tufte CSS they are just lightly styled, semantically correct HTML using blockquote and footer elements. See page 20 of The Visual Display of Quantitative Information for an example in print.

In his later books, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section> tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought technique. Pick one approach and stick to it.

Type

In print, Tufte has used the proprietary Monotype Bembo font. A similar effect is achieved in digital formats with the now open-source ETBook, which Tufte CSS supplies with a @font-face reference to a .ttf file. In case ETBook somehow doesn’t work, the CSS shifts gracefully to other serif fonts like Palatino and Georgia.

Also included are separate font files for bold (strong) and italic (emphasis, cite), instead of relying on the browser to mechanically transform the text. This is typographic best practice.

If you prefer sans-serifs, use the sans class. It relies on Bootstrap's default font stack for sans-serifs.

As always, these design choices are merely one approach that Tufte Bootstrap provides by default.

Figures

Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.

Figures should try to use the figure element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:

Tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph.

Use Bootstrap's included figure classes: .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.

Code

Warning: the example below was carefully chosen to avoid the need for escaped characters, something that's often a challenge for technical writing on the web.

Technical jargon, programming language terms, and code samples are denoted with the code class, as I’ve been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS follows GitHub’s font selection, which shifts gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier.

Extended code examples should use a pre tag with class code. This adds control over indentation and overflow as well:

;; Some code examples in Clojure. This is a comment.

    ;; applying a function to every item in the collection
    (map tufte-css blog-posts)
    ;;;; if unfamiliar, see http://www.lispcast.com/annotated-map

    ;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq
    (doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d)))

    ;; that same side-effecty loop, formatted
    (doseq [[[a b] [c d]] (map list
                       (sorted-map :1 1 :2 2)
                       (sorted-map :3 3 :4 4))]
    (prn (* b d)))

    ;; If this proselytizing has worked, check out:
    ;; http://howistart.org/posts/clojure/1

Epilogue

Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.