Zach’s ugly mug (his face) Zach Leatherman

I made a style guide for my personal web site and you should too.

August 01, 2017 On Twitter (archived)

As my own little corner of the web uncermoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.

After ten years, it’s time to stop tearing open seed packets and carelessly throwing seeds around. It’s time to get out a trowel (or whatever people use for gardening) and organize the components I’ve built for this garden into a style guide. It isn’t an elaborate design system like the fancy ones on, but it’s mine and I am getting a lot of use out of it all the same.

Not only has it helped collate all of the components I’ve built for individual blog posts in the past, it’s a great way to test larger CSS changes I make to my site. In a way, it provides a worry-reducing comfort much in the same way that unit testing does, albeit less automated.

There are a few cool things in there:

  • Shows the different stages in web font loading and how they each render.
  • Tests for hyphenation and ligatures on web fonts.
  • text-decoration-skip-ink: auto on links (to avoid overlap between descenders and link underlines) with feature tested fallback to a gradient approach.
  • Fluid (and breakout full width) images, videos (including third party players) using only CSS.
  • Inline resizable demos.

Having a style guide, in my mind, has little to do with the size, scope, or scale of your web site. Style guides are about code consistency and—more importantly—code longevity.

Software will always require changes, but speaking from someone who has maintained a web site for ten years running I’m happy to have a style guide to assist with any future changes I make. If your web site is in it for the long haul (and why wouldn’t that be your goal?), I highly encourage you to make a style guide of your own!

(Read—but don’t judge—my first post from February 2007.)

< Newer
The Web Font Loading Glossary
Older >

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

  1. Luigi Disqus

    02 Aug 2017
    Totally agree with you 🙂 . Little question regarding the text-decoration-skip fallback: did you used the css supports queries ? I couldn't find anything in your defer.min.css 🤔
    1. zachleat Disqus

      02 Aug 2017
      Good question—yes! You can find the mixin here:
      1. Luigi Disqus

        02 Aug 2017
        Thank you :)
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)