Share your uses of Tufte CSS!

[daveliepmann]

It would be good to have a list of pages where Tufte CSS is in use. This will help give us an idea of functionality we want to aim for.

[jjsanderson]

I used TufteCSS here: gwydion.uk.

I made a very few CSS changes (all in index.html), including tightening up the sidenote leading and padding the top to re-align baselines (see #29). Other changes were to integrate Lightbox, and hence to avoid bottom borders on linked images. I also bodged an alternate caption style, as (to my eye) the sidebar-inclined caption looked odd with photos rather than figures.

What I'm less certain about is whether this is the sort of page for which TufteCSS is really appropriate. It's certainly bending the intended use case. However, there's an in-joke element to my using it here, so it works for the intended audience… it's just that the intended audience is modest!

[daveliepmann]

Congratulations @jjsanderson! I admit I had not thought of a birth announcement as a use case, but it's quite nice.

[jjsanderson]

Thanks! Yes, it's an odd use case. You're welcome to add it to the docs as an example, of course, though it's rather far from the intended type of document.

[sotojuan]

I use it on a little blog-ish thing I started a few weeks ago. People that read what I write there have liked it! That said, it's pretty much a personal project.

Off-topic, but I made that site about three weeks ago (October 22~ ish). Has there been any significant updates to Tufte CSS since then that I should know about?

Update: Don't use that project anymore, so I removed the link.

[ghost]

@sotojuan nice! I too prefer Palatino over Bembo. 👍

[mandaris]

@jjsanderson I love that you added the open graph stuff!

[jjsanderson]

@mandaris Hah! You know, I'd forgotten I'd done that. I may be against carpet-bombing baby photos all over Facebook, but in this case Facebook was pretty much the intended audience. So… yeah, opengraph. :-)

[otherjoel]

I am using Tufte CSS — and Tufte-LaTeX — on my site Secretary of Foreign Relations (Github repo). Each page on that site exists as both a web page and as a PDF file in the Tufte Handout class, both generated from the same markup with Pollen.

To see the markup used by Pollen to generate each page (except for the main page), you can click the “◊Pollen source” link at the top (example). Pollen is really nice in that it allows you to design your own markup and target any text-sourced format. So even though the HTML markup in Tufte CSS is a bit fiddly, it becomes quite easy to use in practice: e.g., ◊numbered-note{Sidenote text} will generate all the markup for a side-note.

In addition, Pollen is used to stitch individual pages together into a complete print-ready PDF of the book ‘Flatland’, also in Tufte style.

I’m using the latest version of Tufte CSS with no real changes; I’ve kept any CSS of my own in a separate stylesheet.

[daveliepmann]

@otherjoel Very nice stuff. Thanks for sharing!

[frostbitten]

I've got an interesting combination with bootstrap that i'm using in a project page: http://frostbitten.github.io/ByeBox/

[frostbitten]

I've also made a fork that compartmentalizes the tufte-css format so I can create modular content blocks like so:

I just prefixed all the css selectors with a custom identifier .tufte-body

Another iteration:
This one incorporates customized form elements:

Desktop: Mobile:

[benlk]

I used it for Ranked Situational Fury, which is mostly lists of words, their definitions, and the sources of their definitions.

[steckerhalter]

I have started to write a new blog with Tufte CSS. I really like how it looks. I had previously done my own CSS for another site which came pretty close to Tufte CSS so I figured I could just use Tufte instead of porting the old code to the new static site generator.

I'm using Lekor now which IMO has fixed some of the issues of all the previous static site generators (like hexo etc.).

One thing I noticed is that there isn't any print media CSS. Would that be something you could add?

[daveliepmann]

@steckerhalter There actually used to be some basic print media CSS back in the beginning. I'm not sure if it got removed in the big upgrade last ~June/July or if it was earlier than that, but the reason was a lack of desire to QA an entirely different use case. I suggest checking the commit history from way back. Cheers!

[siawyoung]

I created a Jekyll theme that implements Tufte CSS! It's AMP-compliant too, so it's super fast. Check it out: Immaculate.

[gamecubate]

I have adopted TufteCSS for my site and love it. So far, tweaks were neither needed nor done (to the main page and a few others) and I've used the framework as is. Great work!

[mbucc]

Using it for my blog at markbucciarelli.com. Very happy with the work, thanks! (I am using it with code wrapping pull request.)

[dakrone]

I'm using TufteCSS for my personal site through a project I created called ox-tufte that exports Emacs' Org-mode documents in HTML compatible with TufteCSS.

[sdruskat]

@siawyoung (and @clayh53 ) have partially beaten me to it, but I've also compiled a wee Jekyll theme. It tries to stick as close to tufte-css as possible. https://github.com/sdruskat/tufte-css-jekyll.

[duzyn]

I created a project named tufte-markdown so you can simply write your articles with Markdown, then you can convert them to beautiful HTML and PDF articles using Tufte's style.

You can find out how it is on tufte-markdown.

[mplewis]

I use Tufte CSS in mplewis.com (source code).

[seezee]

It's a work in progress, but I'm using my own adaptation of Tufte CSS at mercury.photo. I'll be posting an article on how to use the margin-note and side-note Wordpress shortcodes I created to speed up my workflow later; I'll link to it when it's ready.

[jasonpeacock]

I've just finished rebuilding my personal website to use tufte-css:

https://jasonpeacock.com

I wrote up my learnings and tools used to generate my website from markdown using Pandoc, Pandocomatic, pandoc-sidenote, and tufte-pandoc-css:

https://jasonpeacock.com/projects/markdown-websites/

Everything is available in my repo:

https://github.com/jasonpeacock/websites/tree/master/jasonpeacock.markdown

[dylan-k]

I'm attempting to build a Tufte CSS layout using Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Contributors welcome.

[seezee]

I'm attempting to build a Tufte CSS layout using Bootstrap 4.
https://github.com/dylan-k/tufte-bootstrap
Contributors welcome.

I took a look at your bug in the inspector tools & couldn't figure out what was pushing the paragraph down. The original Tufte CSS uses a right float to accomplish the sidenotes & marginnotes. Your solution is more elegant — I hope you are able to fix it!

[juliuso]

I recently rebuilt my site with Tufte CSS by shoehorning it into Jekyll, using it as-is. Major points are:

• Blends well with MathJax.
• Simple horizontal nav added to the top of each page.
• Homepage lists the 5 most recent posts.
• The Archives page includes permalinks to all posts in reverse chronological order.
• Each posting is written in html markup, with Jekyll wrapping each post in an <article> tag.
• Feasibility of using Markdown for posts with the theme is uncertain.

https://juliuso.com

[daveliepmann]

Hey folks, after a long time collecting uses of Tufte CSS here, I decided to move things to the wiki, where it fits a bit better. I think I copied everything over; if I missed something, please feel free to edit the wiki yourself.

Thanks for sharing :)

[akaihola]

I have a somewhat unconventional use for Tufte CSS on my small site for palindromes I've written in Finnish: palindromi.fi

[akaihola]

Another site I just took Tufte CSS into use in is etätunnit.taiteilijat.fi (so far only in Finnish) which contains guides for using the Zoom video conferencing app for remote music instrument lessons, and configuring its unique ability to get good sound quality for music instead of optimizing for speech.