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

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 in…


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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 styleguides.io, 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.)

Retweet to share this post


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2017-08-01T05:00:00+00:00) I made a style guide for my personal web site and you should too.. Retrieved from https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/

MLA
" » I made a style guide for my personal web site and you should too.." Zach Leatherman | Sciencx - Tuesday August 1, 2017, https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/
HARVARD
Zach Leatherman | Sciencx Tuesday August 1, 2017 » I made a style guide for my personal web site and you should too.., viewed ,<https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/>
VANCOUVER
Zach Leatherman | Sciencx - » I made a style guide for my personal web site and you should too.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/
CHICAGO
" » I made a style guide for my personal web site and you should too.." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/
IEEE
" » I made a style guide for my personal web site and you should too.." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/. [Accessed: ]
rf:citation
» I made a style guide for my personal web site and you should too. | Zach Leatherman | Sciencx | https://www.scien.cx/2017/08/01/i-made-a-style-guide-for-my-personal-web-site-and-you-should-too/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.