Classless Tufte CSS

I've long admired how the Tufte CSS project allowed you to create web pages in the style the legendary Edward Tufte developed.

One improvement I've wished for is the ability to use the Tufte CSS with well-structured semantic HTML, without requiring sprinkling class attributes around the CSS.

So I forked the project and created a new one called, which you can check out at: Classless Tufte CSS.

You can try it out by including this in the <head> section of your HTML:

<link rel="stylesheet" href=""/>

Your HTML requires no class attributes but should be in a standard semantic structure like this:

    <h1> title </h1>
    <p> subtitle </p>
       <h2> section header </h2>
       ... paragraphs, lists, code blocks, figures etc

The main features lost in moving to the classless form were

There are some added features though:

Here is a comparison of the HTML between Tufte CSS and Classless Tufte CSS, so you can see the simplification.

Tufte CSS Classless Tufte CSS
All-caps initial text ...<p><span class="newthought">A new thought</span> comes to me... ...<section><p>A new thought comes to me...
Epigraph ...<div class="epigraph"><blockquote><p>... ...</h2><blockquote><p>...
Sidenote reference <label for="sn-extensive-use-of-sidenotes" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-extensive-use-of-sidenotes" class="margin-toggle"/>
Sidenote <span class="sidenote">This is a sidenote.</span> ...</p><aside><sup>1</sup> This is a sidenote.</aside>
Margin note <label for="mn-demo" class="margin-toggle">&#8853;</label><input type="checkbox" id="mn-demo" class="margin-toggle"/><span class="marginnote">This is a margin note. Notice there isn’t a number preceding the note.</span> ...</p><aside>This is a margin note. Notice there isn’t a number preceding the note.</aside>
Fullwidth figure ...<figure class="full-width">... </section><figure>...
iframe wrapper <figure class="iframe-wrapper"><iframe width="853" height="480" src="" frameborder="0" allowfullscreen></iframe></figure> <figure><iframe width="853" height="480" src="" frameborder="0" allowfullscreen></iframe></figure>

What prompted me to do this is that I'm currently working to convert this blog to a static version, and I wanted to use Tufte CSS for plain semantic HTML generated from markdown.