Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (classless-tufte-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Classless Tufte CSS

This is a modification of the original Tufte CSS to remove reliance on class attributes so it can be applied to purely semantic HTML.

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 original project was 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://eobrain.github.io/classless-tufte-css/ is the best overview of the project.

To use Tufte CSS, just add the following to your HTML doc's head block:

<link rel="stylesheet" href="https://unpkg.com/classless-tufte-css@1.3.0/tufte.min.css"/>

(See the live version for instructions for how to host the CSS and font files yourself.)

Minimal Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Title Goes Here</title>
    <link rel="stylesheet" href="https://unpkg.com/classless-tufte-css@1.3.0/tufte.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <article>
        <h1>Title Goes Here</h1>
        <p>Subtitle goes Here</p>
        <section>
            <h2>Section Header goes here</h2>
            <blockquote>
                <p>Epigraph goes here</p>
                <footer>Attribution goes here</footer>
            </blockquote>
            <p>Main text starts here</p>
            <aside>Margin note goes here</aside>
        </section>
        <section>
            <p>All-caps line goes here</p>
            <ul>
                <li>List item in margin</li>
                <li>List item</li>
            </ul>
            <figure>
                <img src="https://dummyimage.com/2000x200/" />
                <figcaption>Inline figure</figcaption>
            </figure>
            <aside>
                <figure>
                    <img src="https://dummyimage.com/2000x200/" />
                    <figcaption>Margin figure</figcaption>
                </figure>
            </aside>
        </section>
        <section>
            <ul>
                <li>Inline list item</li>
                <li>List item</li>
            </ul>
        </section>
        <figure>
            <img src="https://dummyimage.com/2000x200/" />
            <figcaption>Fullwidth figure</figcaption>
        </figure>
    </article>
</body>

</html>

See this minimal example live.

Project Scope and Status

Classless 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 Classless Tufte CSS.

Deploying

Make changes
Bump version in package.json, examples, and docs to new version with semver form X.Y.Z
From shell, npm install
From shell: npm publish
Commit changes to git
From shell: git push
From shell: git tag vX.Y.Z
From shell: git push --tags

Contributing

To contribute the original Tufte CSS project see their Contributing instructions.

Contributions are also welcome to this version in the same way, by opening an issue, or better yet, a pull request with how you think it should be fixed.

Contributors

Dave Liepmann (creator, project maintainer, design)
Edward Tufte (editing, direction, design)
Adam Schwartz (ET Book font, descender-clearing link underlines)
Clay Harmon (media queries, rem units)
Linjie Ding (italic typeface)
Stephen A Thomas (automagically numbered sidenotes)
Ben Newman (sidenote numbering style)
Kevin Godby (booktabs tables)
James Kolce (sidenote fixes)
Chris MacKay (sidenote toggling on small screens)
Paul Rodriguez (sidenote style tweaks)
Claudiu-Vlad Ursache (HTML5 conformity)
Eamonn O'Brien-Strain (Classless version)

License

Released under the MIT license. See LICENSE.