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 / Gulp Tasks
- Online Services
- Other
- Articles
Generating styled markup from a folder of markup snippets.
Demo | Source | PHP, HTML patterns
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 is a collection of tools to help you create atomic design systems.
Demo | Source | PHP, Static Generator, Grunt Task
Provides a visual testing page for Drupal themes.
A starting point for crafting living style guides.
Demo | Source | PHP, HTML patterns
A starting point for crafting living style guides for Bootstrap-based projects.
Demo | Source | PHP, HTML patterns, Bootstrap
An initial directory setup, style guide and pattern primer. Intended as a starting point for […] projects…
Demo | Source | PHP, HTML patterns
Source | Ruby, HTML patterns
The easiest way to create front-end style guides with Sass and Compass
Demo | Open source demo | Source | Ruby, Markdown, Sass
Source | Ruby, Rails, Components
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
Front-end documentation engine
Demo | Source | NodeJS, Grunt, RequireJS, LESS
A free app that gives you an interface to store and manage your front-end patterns.
Demo | Source | NodeJS, Gulp, Angular, Markdown/YAML
Yeoman Generator for Style Prototypes
Source | NodeJS, Yeoman, Ruby, Git
Source | NodeJS, HTML patterns
Source | NodeJS, Static Site Generator, Mustache patterns
Source | NodeJS, Gulp, Markdown, Static Site Generator, Mustache patterns
A tool for building website UI toolkits
Demo | Source | NodeJS, HTML & Handlebars patterns
Simple styleguide framework
Using Jekyll Styleguide you can generate a Pattern Library and add patterns by simply adding new files to the
_postsfolder. Includes a GulpJS workflow that compiles Sass auto-builds Jekyll and refreshes your browser :)
Demo | Source | Jekyll, Static Site Generator, Markdown, Gulp
Source | Jekyll, Static Site Generator
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.
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, NodeJS, KSS
Source | *CSS, Ruby, MiddleMan, KSS
Source | *CSS, Ruby, MiddleMan, KSS
StyleDocco generates documentation and style guide documents from your stylesheets.
Source | *CSS, NodeJS, Markdown
DSS, Documented Style Sheets, is a comment styleguide and parser for CSS, LESS, STYLUS, SASS and SCSS code.
Source | *CSS, NodeJS, Grunt, Sublime Plugin
Generates bootstrap-like documentation for your own CSS!
Source | *CSS, JS, Backbone, Underscore, Markdown
Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.
Demo | *CSS, Ruby, Markdown
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 is styleguide framework written in PHP and jQuery. It display nicely all your commented CSS […]
Demo | Source | CSS, PHP, jQuery, Markdown
CLI, gulp/grunt task to create style guides from stylesheets using KSS notation.
Demo | Source | GruntJS, GulpJS, *CSS, NodeJS, KSS, Gulp, Grunt
Grunt plugin for building living styleguides with Handlebars from Markdown comments in CSS, SASS and LESS files.
Source | GruntJS, Handlebars, Markdown
Build and Document Your Interface. Then Share the Code.
Source | GruntJS, Markdown
Source | GruntJS, HTML patterns
These services provide a web-app to generate your styleguide. Some require an account
Frontify is a design collaboration tool that has designers and developers in mind. Upload & Specify your design - the style guide & UX pattern library is automatically generated from your specs.
Service | Service, Login, Free (1 project), Commercial (2+ projects)
Service | Service, Login, (Commercial)
Stylify Me extracts the styles of a given website and displays them in a styleguide
Demo | Extract, Example
Yeoman Generator for Style Prototypes
Yeoman Generator | Templates, Sass, Compass, Yeoman, Grunt,Bower, Styletiles
- 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/