Please sign in first

Not a member?

The Beauty of Living Style Guides

Lesson Contents

Definition of living style guide

Examples of living style guides

Style guide generators

Video Lesson

Written Lesson

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:

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

If you are interested in documenting Javascript and other languages, you can easily do it with DocumentCSS as well, as this tool is a subset of DocumentJS. I won’t be covering that part in this lesson, but it’s good to have in mind. Also know that at Bitovi, we can help you creating a living style guide for your project and provide training for your team to make it part of your workflow, without disrupting your team’s workload and efficiency.

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.