In Search of a Simple Stylesheet
When looking for a design for this site I wanted to try to keep it as minimal as possible. I'd like to be able to write markdown, maybe with some minor extras in html, link to a <10kb css file, and call it a day.
I'm absolutely not a designer and even though I'd consider myself experienced with CSS if you give me a blank page and say "style this" it'll turn out horribly. This is why I really like drop in CSS options like pico css for the apps I've built. However Pico feels much more built for a small webapp or a marketing site. So I wanted to find another similar sort of CSS drop in I could customize.
Tufte CSS
In the pass I've come across Tufte CSS which is styled after Edward Tufte's print books His book The Visual Display of Quantitative Information is a great read. I'd recommend checking it out of the library and leafing through it if you have a chance . It's a great option if you're looking for a somewhat unique blog style. The callouts and sidenotes in particular standout as they work equally well on mobile as well as desktop without any js. It's not quite 100% drop in thought, and it doesn't fully style markdown without adding a bit of html to your markdown. This isn't a dealbreaker for me and given the advantages of the sidenotes adding a bit of html it's a worthy tradeoff in my opinion.
But what else is there out there? Concrete CSS and Water CSS are two that I've seen which try to be fully drop in for markdown/semantic html blogs.
Dropin Minimal CSS List
Recently due to some conversation around Concrete on HN I found this awesome github repo which lists more than 50 of these sorts stylesheets. I took some time and went through them all. The following stood out The whole list is impressive and are a great reminder of what's possible with a few hundred lines of css. I really apprechiated looking through them all and it's refreshing after spending time with css-in-js and tailwind at work. to me:
- Hack CSS: Monospaced, with some personality, however the fontsize and spacing doesn't do it for me.
- Latex CSS: Looks more programmatic. As someone who's used Latex it feels familar.
- Magick CSS: Really unique and standout in this list. Tempted to use it for TTRPG writing.
- Mui CSS: Simple attempt at MUI's style. Not a fan of MUI but this isn't the worst.
- OK CSS: As the name indicates. It feels like a stripped down Pico CSS.
- Preface CSS: Monospaced and lists don't have inline margin which I like.
- Superstylin: Basic, but does have some personality for this type of css.
Goals
After looking at a lot of different options I landed on the following features:
- Works with markdown + minimial customization
- Provides an easy way to do callouts/asides
- Monospaced font
- <10kb, and a single file
Given these requirements I decided that a fork of Tufte CSS would be the best place to start. I wanted to make it feel a bit more "techy" by bringing in some of Hack, strip out the pieces I don't need, and maybe try to layer in a bit of Magick.
Alterations
- Using an orange link color which emulated Hack's hover link hover style. This breaks a bit of the goal of making links less distracting however I really enjoy the bit of pop you get from Hack's style here.
- I swapped in Berkeley Mono as the font. It's the terminal font I use and I really enjoy the style. Also let's be honest I'm still a bit embarassed that I paid for a font so I want to try and use it as much as possible.
- I brought the underline onto the sidenotes on mobile. I've found that it's easy to not notice that they are clickable especially since the assumption is they are footnotes.
- I moved some of the reused css values to custom properties. This doesn't impact the display however custom properties make css much nicer to work with and they are very well supported.
- I had to write some custom styles for my footer.