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

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 …

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 …

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) → The people at GDS really know their stuff. Want to read more? Here: Design principles …

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 …

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

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 …