Anna Debbenham – creator of styleguides.io – 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.
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.
The Uber brand is more than a name. It’s a set of values, attributes, and artwork that reflects the spirit of our company. Using it consistently will reinforce our passion and commitment to providing a world class experience.
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.
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.
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.