10 ms·

ET-Jekyll: Edward Tufte-inspired Jekyll theme

148 points by bradley_taunt 5y ago

magamig 5y ago
These custom fonts that people use are so unnecessary... Just let me use my browsers' default!
- slater 5y ago
  ET Book, the font used on the page, is free and open-source: https://edwardtufte.github.io/et-book/ https://edwardtufte.github.io/et-book/ Modern browsers also have preferences to switch off web fonts.
  - divbzero 5y ago
    The main downside of custom web fonts isn’t the licensing but having to download those fonts to render the page. There are ways to optimize font loading [1] but it can still lead to delay in rendering or font swaps. It looks like ET-Tufte has already considered and tried to mitigate this downside. [2] [1]: https://web.dev/optimize-webfont-loading/ https://web.dev/optimize-webfont-loading/ [2]: https://et-jekyll.netlify.app/et-jekyll-theme/#performance https://et-jekyll.netlify.app/et-jekyll-theme/#performance
    - mrunseen 5y ago
      Licensing is a issue[0] in commercial fonts, though. [0]https://twitter.com/typographica/status/1395769805542547461?s=20 https://twitter.com/typographica/status/1395769805542547461?...
- sergiomattei 5y ago
  I think it’s beautiful. It’s all subjective and they strived to add beautiful typography to this theme.
- JustFinishedBSG 5y ago
  > Just let me use my browsers' default! Just disable fonts in the browser settings then.
- mrunseen 5y ago
  It is only natural to include a font which was commissioned by original author.
0atman 5y ago
Been using this for a few years now, LOVE marginnotes! For example: https://www.0atman.com/articles/20/polyphase-one-month https://www.0atman.com/articles/20/polyphase-one-month
- ryantgtg 5y ago
  Yeah, that is fun! I'm gonna take this theme for a spin right now!
strzibny 5y ago
Beautiful theme. Also happy to see Jekyll here.
antiterra 5y ago
If only for unique lI1, Johnston is a better choice than Gill Sans for a body copy sans serif font. (Tufte’s preferences notwithstanding)
mro_name 5y ago
nice, what about dark mode?
- ekam 5y ago
  Seconding this, dark mode would make it perfect. Great work otherwise though
- bradley_taunt 5y ago
  Good call! Will add it to my TODO list
- G1N 5y ago
  I have an Edward Tufte Jekyll theme with dark mode here: https://ibrahimsaberi.com/ https://ibrahimsaberi.com/, not the same as this one but hopefully similar enough
  - mro_name 5y ago
    impressive
  - e12e 5y ago
    Maybe it's less obvious on desktop - but I had to look around a bit to find the source for the theme: https://github.com/GeorgeIpsum/tufte-jekyll https://github.com/GeorgeIpsum/tufte-jekyll
    - ryantgtg 5y ago
      I don't think this source contains the dark mode toggle. He's made only two of his own commits to this fork, and neither relate to that functionality. Would be nice to have! Looks great.
  - hliyan 5y ago
    Somehow, serif fonts look wrong on a dark background. Could it be my association of dark backgrounds with terminals?
mrunseen 5y ago
This have antialiasing on, while Tufte CSS doesn’t, making the text little less “bold” on my Mac. I prefer the antialiasing: auto one (browser on the right) https://i.imgur.com/qEkfG06.png https://i.imgur.com/qEkfG06.png
Lammy 5y ago
The line-height and viewport padding are very pleasant on mobile. I will definitely take some inspiration from this on my own sites. Mild disappointment at how the demo page has been minified info a single gigantic line so there's no easy way to View Source and see how certain things are done. I miss the days when that was the norm.
- abrowne 5y ago
  > Mild disappointment at how the demo page has been minified info a single gigantic line so there's no easy way to View Source and see how certain things are done. Have you tried the Inspector, rather than View Source? That (re)formats the code.
  - Lammy 5y ago
    That's a great idea but still doesn't let me see the markup as generated by Jekyll. I'm more interested in the form than the function in this instance.
    - nxpnsv 5y ago
      It’s entirely possible to clone the repo and run, there is one setting to change not to compress output (blanking at what atm...)
jshen 5y ago
Anyone know of something like this for Hugo?
- RockstarSprain 5y ago
  The closest I found are: 1) Etch https://github.com/LukasJoswiak/etch https://github.com/LukasJoswiak/etch 2) Even https://github.com/olOwOlo/hugo-theme-even https://github.com/olOwOlo/hugo-theme-even I’d very much appreciate any other relevant Hugo themes though!
- amai 5y ago
  Maybe this one: https://github.com/shawnohare/hugo-tufte https://github.com/shawnohare/hugo-tufte or this one: https://github.com/alanorth/hugo-theme-tufte-css https://github.com/alanorth/hugo-theme-tufte-css

148 points by bradley_taunt 5y ago

magamig 5y ago

These custom fonts that people use are so unnecessary... Just let me use my browsers' default!

slater 5y ago
ET Book, the font used on the page, is free and open-source: https://edwardtufte.github.io/et-book/ https://edwardtufte.github.io/et-book/ Modern browsers also have preferences to switch off web fonts.
- divbzero 5y ago
  The main downside of custom web fonts isn’t the licensing but having to download those fonts to render the page. There are ways to optimize font loading [1] but it can still lead to delay in rendering or font swaps. It looks like ET-Tufte has already considered and tried to mitigate this downside. [2] [1]: https://web.dev/optimize-webfont-loading/ https://web.dev/optimize-webfont-loading/ [2]: https://et-jekyll.netlify.app/et-jekyll-theme/#performance https://et-jekyll.netlify.app/et-jekyll-theme/#performance
  - mrunseen 5y ago
    Licensing is a issue[0] in commercial fonts, though. [0]https://twitter.com/typographica/status/1395769805542547461?s=20 https://twitter.com/typographica/status/1395769805542547461?...
sergiomattei 5y ago
I think it’s beautiful. It’s all subjective and they strived to add beautiful typography to this theme.
JustFinishedBSG 5y ago
> Just let me use my browsers' default! Just disable fonts in the browser settings then.
mrunseen 5y ago
It is only natural to include a font which was commissioned by original author.

0atman 5y ago

Been using this for a few years now, LOVE marginnotes! For example: https://www.0atman.com/articles/20/polyphase-one-month https://www.0atman.com/articles/20/polyphase-one-month

ryantgtg 5y ago
Yeah, that is fun! I'm gonna take this theme for a spin right now!

strzibny 5y ago

Beautiful theme. Also happy to see Jekyll here.

antiterra 5y ago

If only for unique lI1, Johnston is a better choice than Gill Sans for a body copy sans serif font. (Tufte’s preferences notwithstanding)

mro_name 5y ago

nice, what about dark mode?

ekam 5y ago
Seconding this, dark mode would make it perfect. Great work otherwise though
bradley_taunt 5y ago
Good call! Will add it to my TODO list
G1N 5y ago
I have an Edward Tufte Jekyll theme with dark mode here: https://ibrahimsaberi.com/ https://ibrahimsaberi.com/, not the same as this one but hopefully similar enough
- mro_name 5y ago
  impressive
- e12e 5y ago
  Maybe it's less obvious on desktop - but I had to look around a bit to find the source for the theme: https://github.com/GeorgeIpsum/tufte-jekyll https://github.com/GeorgeIpsum/tufte-jekyll
  - ryantgtg 5y ago
    I don't think this source contains the dark mode toggle. He's made only two of his own commits to this fork, and neither relate to that functionality. Would be nice to have! Looks great.
- hliyan 5y ago
  Somehow, serif fonts look wrong on a dark background. Could it be my association of dark backgrounds with terminals?

mrunseen 5y ago

This have antialiasing on, while Tufte CSS doesn’t, making the text little less “bold” on my Mac. I prefer the antialiasing: auto one (browser on the right) https://i.imgur.com/qEkfG06.png https://i.imgur.com/qEkfG06.png

Lammy 5y ago

The line-height and viewport padding are very pleasant on mobile. I will definitely take some inspiration from this on my own sites. Mild disappointment at how the demo page has been minified info a single gigantic line so there's no easy way to View Source and see how certain things are done. I miss the days when that was the norm.

abrowne 5y ago
> Mild disappointment at how the demo page has been minified info a single gigantic line so there's no easy way to View Source and see how certain things are done. Have you tried the Inspector, rather than View Source? That (re)formats the code.
- Lammy 5y ago
  That's a great idea but still doesn't let me see the markup as generated by Jekyll. I'm more interested in the form than the function in this instance.
  - nxpnsv 5y ago
    It’s entirely possible to clone the repo and run, there is one setting to change not to compress output (blanking at what atm...)

jshen 5y ago

Anyone know of something like this for Hugo?

RockstarSprain 5y ago
The closest I found are: 1) Etch https://github.com/LukasJoswiak/etch https://github.com/LukasJoswiak/etch 2) Even https://github.com/olOwOlo/hugo-theme-even https://github.com/olOwOlo/hugo-theme-even I’d very much appreciate any other relevant Hugo themes though!
amai 5y ago
Maybe this one: https://github.com/shawnohare/hugo-tufte https://github.com/shawnohare/hugo-tufte or this one: https://github.com/alanorth/hugo-theme-tufte-css https://github.com/alanorth/hugo-theme-tufte-css