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
Python / Flask
Ruby / RAILS
ReactJS
NodeJS
Jekyll
CSS (parsing CSS source)
Grunt / Gulp Tasks
Online Services
Other
Articles

PHP

Pattern Primer

Generating styled markup from a folder of markup snippets.

Demo | Source | PHP, HTML patterns

Pattern Lab

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

Demo | Source | PHP, Atomic, 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

atomicdocs

Atomic Docs is a front end style guide generator and Scss/Less/Stylus partial manager. Atomic Docs is built in PHP and Sass.

Demo | Source | PHP, Atomic, HTML patterns

Python / Flask

Flask-Styleguide

A living style guide for your Flask application.

Demo | Source | Documentation | Python, Flask, KSS

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

Mountain View

Source | Ruby, Rails, Components

React

Bluekit

Demo | Source | React, components

NodeJS

DocumentCSS

Create a live style guide that can easily expand into a documentation hub. Store all kinds of documentation, from design rationale, to CSS, JS, and API docs.

Demo | Source | NodeJS, Markdown, Custom Tags, Static Site Generator

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

A tool for building website UI toolkits

Component Styleguide

Demo | Source | NodeJS, HTML & Handlebars patterns

Simple styleguide framework

Fractal

A tool to help you build and document web component libraries and then integrate them into your projects.

Source | NodeJS, Markdown

Astrum

A lightweight, non-opinionated, pattern library designed to be included with any web project.

Source | NodeJS, CLI, Markdown

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

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

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

postcss-style-guide

PostCSS plugin. CSS comments will be parsed through Markdown and displayed in a generated HTML document.

Source | CSS, NodeJS, GruntJS, GulpJS, Markdown

mdcss

PostCSS plugin. Easily create and maintain style guides with CSS comments using Markdown.

Demo | Source | CSS, PostCSS, NodeJS, GruntJS, GulpJS, Markdown

aigis

Aigis is a Node.js package that parses comments in your CSS and auto-generate a style guide. It is similar to Hologram, like a Node.js implementation of Hologram.

Demo | Source | CSS, NodeJS, GulpJS, Markdown

Grunt / Gulp Tasks

SC5 style guide generator

CLI, gulp/grunt task to create style guides from stylesheets using KSS notation.

Demo | Source | GruntJS, GulpJS, *CSS, NodeJS, KSS, Gulp, Grunt

Sassdown

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

Source | GruntJS, Handlebars, Markdown

PatternPack

Build and Document Your Interface. Then Share the Code.

Source | GruntJS, 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

Frontify Style Guide

You can create design, brand or UI guidelines with the Frontify Style Guide editor. Use existing templates or start from scratch by choosing from over 20 smart blocks (like colors, media, typography, UI elements, & more) - For Non-coders and coders =)

Service | Service, Login, Free (“Powered by Frontify”), Commercial ($9/$49)

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

North Generator Style Prototype

Yeoman Generator for Style Prototypes

Yeoman Generator | Templates, Sass, Compass, Yeoman, Grunt,Bower, Styletiles

An overview of Pattern Library Generators

PHP

Python / Flask

Ruby / RAILS

React

NodeJS

Jekyll

CSS (parsing CSS source)

Grunt / Gulp Tasks

Online Services

Other

Articles

About