qdrk / styleguide-generators

An overview of automatic living styleguide generators

An overview of Pattern Library Generators

Pattern Libraries (or Style Guides) are a helpful tool in developing websites. Read more about Creating Style Guides at this A List Apart article.

Maintaining a static Pattern Library (in HTML/CSS) is hard work and errorprone. There are, however, various tools that help us generate a dynamic Pattern Library or 'Living Style Guide'.

This page aims to list these tools. If you know of other tools or have other feedback, please let me know or submit a PR. Thanks, David Hund @valuedstandards

NOTE: This should list generators only: no Bootstrap, Foundation, Topcoat, etc. but tools to generate a Living Style Guide.

Table of Contents

• PHP
• Ruby / RAILS
• NodeJS
• Jekyll
• CSS (parsing CSS source)
• Grunt Tasks
• Online Services
• Other
• Articles

PHP

Pattern Primer

Generating styled markup from a folder of markup snippets.

Demo | Source | PHP, HTML patterns

Pea.rs

Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Demo | Source | PHP, Wordpress Theme

Pattern Lab

Pattern Lab is a collection of tools to help you create atomic design systems.

Demo | Source | PHP, Static Generator, Grunt Task

Drupal Project Styleguide

Provides a visual testing page for Drupal themes.

Demo | Source | PHP, Drupal

Style Guide Boilerplate

A starting point for crafting living style guides.

Demo | Source | PHP, HTML patterns

Style Guide Boilerplate Bootstrap Edition

A starting point for crafting living style guides for Bootstrap-based projects.

Demo | Source | PHP, HTML patterns, Bootstrap

Barebones

An initial directory setup, style guide and pattern primer. Intended as a starting point for […] projects…

Demo | Source | PHP, HTML patterns

Ruby / RAILS

Pattern Primer on Ruby

Source | Ruby, HTML patterns

Living Style Guide

The easiest way to create front-end style guides with Sass and Compass

Demo | Open source demo | Source | Ruby, Markdown, Sass

NodeJS

Source JS

Front-end documentation engine

Demo | Source | NodeJS, Grunt, RequireJS, LESS

Tapestry App

A free app that gives you an interface to store and manage your front-end patterns.

Demo | Source | NodeJS, Gulp, Angular, Markdown/YAML

Team-Sass / generator-style-prototype

Yeoman Generator for Style Prototypes

Source | NodeJS, Yeoman, Ruby, Git

Pattern Primer on Node

Source | NodeJS, HTML patterns

Pattern Lab on Node

Source | NodeJS, Static Site Generator, Mustache patterns

Fabricator

Source | NodeJS, Gulp, Markdown, Static Site Generator, Mustache patterns

A tool for creating modular website toolkits

Jekyll

Jekyll Styleguide

Using Jekyll Styleguide you can generate a Pattern Library and add patterns by simply adding new files to the _posts folder. Includes a GulpJS workflow that compiles Sass auto-builds Jekyll and refreshes your browser :)

Demo | Source | Jekyll, Static Site Generator, Markdown, Gulp

Pattern Primer on Jekyll

Source | Jekyll, Static Site Generator

CSS (parsing CSS source)

These tools define a documenting syntax for CSS. You would e.g. write your components' HTML in a comment above the component's CSS and the tool would generate a Styleguide from it.

Knyle Style Sheets: KSS

KSS is intended to help automate the creation of a living styleguide. A styleguide serves as a place to publish KSS documentation and visualize different states of UI elements defined in your CSS.

Demo | Source | *CSS, Ruby

KSS on Node

Demo | Source | *CSS, NodeJS, KSS

KSS Middleman

Source | *CSS, Ruby, MiddleMan, KSS

Middleman KSS

Source | *CSS, Ruby, MiddleMan, KSS

StyleDocco

StyleDocco generates documentation and style guide documents from your stylesheets.

Source | *CSS, NodeJS, Markdown

DSS

DSS, Documented Style Sheets, is a comment styleguide and parser for CSS, LESS, STYLUS, SASS and SCSS code.

Source | *CSS, NodeJS, Grunt, Sublime Plugin

Kalei Style guide

Generates bootstrap-like documentation for your own CSS!

Source | *CSS, JS, Backbone, Underscore, Markdown

Hologram

Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.

Demo | *CSS, Ruby, Markdown

Styleguide.js

Generate a styleguide from your CSS, by adding YAML data in the comments. It generates a self-contained html file. Works great for component based CSS.

Demo | Source | *CSS, NodeJS, Coffeescript, YAML

YSS

YSS is styleguide framework written in PHP and jQuery. It display nicely all your commented CSS […]

Demo | Source | CSS, PHP, jQuery, Markdown

Grunt Tasks

Sassdown

Grunt plugin for building living styleguides with Handlebars from Markdown comments in CSS, SASS and LESS files.

Source | GruntJS, Handlebars, Markdown

Pattern Primer on Grunt

Source | GruntJS, HTML patterns

Online Services

These services provide a web-app to generate your styleguide. Some require an account

Element CSS

ElementCSS is the easiest way for designers, clients and front-end developers to create, edit and view website style guides in the medium they're intended for — the browser.

Service | Demo | Service, Login

Patternry

Service | Service, Login, (Commercial)

Other

Stylify Me

Stylify Me extracts the styles of a given website and displays them in a styleguide

Demo | Extract, Example

Survival Kit

Tools and defaults for designing websites in the brower.

Source Kit | Templates, HTML, Sass, Compass, Styletiles

Articles

• 24ways.org/2011/front-end-style-guides/
• styletil.es/
• maban.co.uk/66/
• gimmebar.com/.../front-end-styleguides-and-pattern-libraries
• alistapart.com/article/creating-style-guides
• patternlab.io/resources.html
• kippt.com/asiermartinez/style-guides
• bradfrost.github.io/this-is-responsive/
• docs.google.com/spreadsheet/
• medium.com/daily-ui-ux-inspirations/
• speakerdeck.com/.../style-guide-driven-development
• speakerdeck.com/.../improving-your-responsive-workflow-with-style-guides
• paulrobertlloyd.com/about/styleguide/