The Beauty of Living Style Guides
- Definition of living style guide
- Examples of living style guides
- Style guide generators
Similar to a standard style guide, a living style guide provides a set of standards for the use and creation of styles in an application. In the case of a standard style guide, their purpose is to maintain brand cohesiveness and prevent the misuse of graphic and design elements. So living style guides are there to maintain consistency in an application and to guide their implementation.
But what makes a living style guide different and more powerful is that much of its information comes right from the application’s source code, making it easy and efficient to reflect the evolving state of an application.
Now, look at the following examples and you will see that the common denominators of a living style guide are:
- A list of the elements that are documented
- Succinct documentation with code snippets and interactive UI demonstrations
Style Guide Generators
There are many flavors of style guide generators to choose from, depending on the code language that you want to document or your project setup.
Here are some places to look for options:
- An In-Depth Overview of Living Style Guide Tools, Robert Haritonov, Smashing Magazine
- Overview of Pattern Library Generators, David Hund, GitHub
- Style Guide Generator Roundup, Susan Robertson, A List Apart
- Style Guide Tools, Website Style Guide Resources
For this tutorial, I will be showing you how you can use DocumentCSS to create your living style guide. This tool created by Bitovi is open source and can be used in any project to document CSS (preprocessors like Less and SASS are supported as well).
This was our quick intro to creating a living style guide, so stay tuned for our next lesson where we will work on Creating a Style Guide Site Map.