Ten Living Style Guide Tools for Web Designers – Best of
A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use consistent styles across their whole project. In the past, developers created style guides manually, which is a lot of work. After a while, they started to automate the workflow, and style guide tools that transform front-end code into well-organized UI libraries have begun to appear.
Living style guides are different from code style guides, as the latter contain rules about how to write readable and maintainable code, while living style guides are collections of front-end patterns, such as CSS classes for buttons, widgets, and typographical elements. Code style guides ensure code consistency, while living style guides ensure visual consistency across a site.
Recommended Reading: How to optimize CSS with Code Style Guides
In this post, we have put together 10 handy tools that can help you generate your own living style guide.
1. Stylify Me
This tool is a lot of fun: just paste the link of the website you would like to analyze, and watch as its style guide is generated in one click of a mouse. With Stylify Me, you can quickly gain an overview of the patterns of a site, including colours, fonts, sizing and spacing. Once the process is complete, you can download the style guide in PDF.
2. Fabricator
Fabricator allows you to build your own UI toolkit, organize your design system, and generate a style guide from your toolkit code. If you work in a team, you can write the documentation in Markdown to make it easier for other developers to use. It can help you to organize your design/coding routine in the way you like.
3. Frontify
Frontify includes everything from digital mockups to wireframing. They also have a style guide tool which offers a clean minimalistic design process with no hassle. You can sign up for free, and insert all the necessary information manually. The process should include color palette, font choices, icons, logos, possibly slogans or preferred web copy.
4. Aigis
With Aigis, you can generate style guides from any text files (e.g. .css, .scss, .styl, .md). You can also write documentation in Markdown, and customize your site theme.
5. Hologram
Hologram was created by Trulia, and is a great solution for generating style guides. It is a Ruby gem that parses comments in your CSS in order to generate awesome style guides. Hologram has a templating system with some basic styles and navigation to make your style guide generating even easier.
6. Styledown
With Styledown, you can write CSS style guides with ease, as it’s a Markdown-based style guide generator. It will work with most web development setups, as it’s platform-neutral. It requires very little to get it up and running. Also, the comments you need to add to your CSS are very minimal. You can create your CSS documentation in either inline CSS comments, or as a separate Markdown file.
7. KSS
KSS (Knyle Style Sheets) is primarily a documentation specification and a style guide format that has its own commenting syntax. KSS also includes a Ruby library that parses .sass, .scss, and .css files documented with the KSS guidelines into a neat style guide. KSS is for more advanced users and professional teams, as generating a style guide with it requires coding knowledge.
8. SC5 Style Guide Generator
With the SC5 Style Guide Generator you can create and edit style guides directly in your browser. It is based on KSS with some cool features included, such as an AngularJS powered UI that helps you view, search and test your styles. SC5 uses the same document notation as KSS. It supports SASS, LESS, PostCSS and pure CSS stylesheets.
9. Styledocco
StyleDocco is a handy Node.js app that creates style guides from your stylesheets. You can install it with npm. In the generated styleguide, StyleDocco shows a preview with the styles you have applied and an example of the HTML code.
On StyleDocco’s home page, you can find two style guide examples, one generated from a default stylesheet, and another one generated from a Bootstrap site. The examples can also help you pick up the documentation syntax SytleDocco uses.
10. Pattern Lab
Pattern Lab is a collection of tools that help you create a modular design system. Pattern Lab is a custom static site generator that stitches together all style elements on a site, and forms templates and pages from them. It can serve as your project’s pattern library and frontend style guide. Pattern Lab allows you to see your style components simultaneously abstractly and in context.
