Front-end Style Guides – Creating and Maintaining Style Guides for Websites

Anna Debbenham – creator of – wrote a book on … Style Guides:

Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have used them. It’s packed with practical tips, whether you’re starting from scratch or assembling one for an existing site.

This book is for people who build stuff for the web and want to make their own style guides. It’s full of techniques, practical advice and examples for both coders and non-coders.

It’s in my library, waiting to read 🙂

Front-end Style Guides →

From Pages to Patterns

Video of Charlotte Jackson’s talk at Beyond Tellerrand on how to adopt pattern thinking to developing a pattern library/styleguide:

This talk will look at how we can help everyone in the team adopt pattern thinking. This includes anyone with a decision to make—not just designers and developers. The whole team can start developing a shared vocabulary and attempt to make the challenge of naming things a little easier.

Naming things indeed is one of the two hard things in computer science, next to cache invalidation and off-by-one errors.

An article on A List Apart is also available: From Pages to Patterns: An Exercise for Everyone →

GOV.UK elements


This guide shows how to make your service look consistent with the rest of GOV.UK.

Translated: GOV.UK’s styleguide / design manual. In true GDS tradition the whole thing is open source 🙂

GOV.UK elements →
GOV.UK elements Source (GitHub) →

TDCSS – Super simple styleguide tool


TDCSS helps you write and document solid, maintainable and modular CSS. It’s especially well suited to adopt a test-driven approach to CSS styling – but of course you may just as well use it to build a regular online styleguide.

Not too sure about calling this test-driven though, as the verificiation process is not automated but requires you looking at the generated styleguide.


Typesetting your CSS Objects: Fontshop Styleguide


Creating a styleguide is not a new practice in the industry. During our recent relaunch of FontShop we decided to use one, too. Read on to see how it helped us, how we did it and what we could have done better.

Whilst I like the grouping of components based on the site of them, I do find there’s on big thing missing from the generated styleguide: the HTML of the example shown. If you look at Mailchimp’s Pattern Library for example you’ll get to see the HTML code next to the result. By the looks of it, that should be perfectly possible with the generator used (KSS) to generate the styleguide.

Typesetting your CSS Objects →
Next FontShop: Styleguide →

Responsive Deliverables: The Style Guide


Jeremy wrote a nice article on Pattern Sharing, sparked by the Code for America Style Guide.

A first look at the style guide might tell you it’s just a pattern primer, yet the menu reveals that the style guide also holds a few templates to use. In order to see the code used for the building blocks you can toggle a switch next to it, as seen before in A List Apart’s Pattern Library.

On a related note Mailchimp’s Pattern Library, Yelp’s Style Guide and SalesForce’s Style Guide (pictured above) are worth mentioning too. Most likely you’ve seen them before.

Code for America Style Guide →
Pattern Sharing →

Be sure to read the original Responsive Deliverables and the 24ways article from 2011 on Front-end Style Guides.