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

Zach has put together a small style guide for his personal site to keep a watch on future updates to the CSS. It gives him the ability to easily look through all the components that have been built up over the years, almost like a reminder as to what resources you have to use for your next article.

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 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.

An excerpt from I made a style guide for my personal web site and you should too

View original article