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
- Multiple
- PHP
- Python / Flask
- Ruby / RAILS
- ReactJS
- VueJs
- NodeJS
- Jekyll
- Angular
- CSS (parsing CSS source)
- Grunt / Gulp Tasks
- Online Services
- Other
- Articles
The UI development environment you'll love to use.
Storybook is a UI development environment for your UI components. With it, you can visualize different states of your UI components and develop them interactively. Then generate a static styleguide to host anywhere.
Demos Docs Source | React, React-Native, Preact, Vue, Angular, Polymer, Webcomponents, HTML*
Generating styled markup from a folder of markup snippets.
Demo | Source | PHP, HTML patterns
Pattern Lab is a collection of tools to help you create atomic design systems.
Demo | Source | PHP, Atomic, 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
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
A living style guide for your Flask application.
Demo | Source | Documentation | Python, Flask, KSS
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
Demo | Source | React, components
Demo | React, Markdown, components
Catalog lets you create beautiful living and fully interactive style guides using Markdown and React components.
Source | Demo React, NodeJS, CLI, Markdown, components
React components catalog with live examples and documenting using markdown
Source | Demo React, Markdown, components
Demo | Source | Vue, Markdown, components
A living style guide generator for everything—CSS, JS, React, Angular, and more.
Demo | Source | Static Site Generator, NodeJS, Markdown, React, Angular, Ember, CSS, LESS, SASS
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
patternplate is a platform designed to help you create and maintain component libraries.
Source | NodeJS, React (jsx) patterns, LESS
A tool for building website UI toolkits
Demo | Source | NodeJS, Gulp, Markdown, Static Site Generator, Mustache patterns
Simple styleguide framework
Demo | Source | NodeJS, HTML & Handlebars patterns
A tool to help you build and document web component libraries and then integrate them into your projects. By default, Fractal uses Handlebars to render so called view templates, but you are free to use a different template engine.
Source | NodeJS, Markdown, Handlebars
A lightweight, non-opinionated, pattern library designed to be included with any web project.
Source | NodeJS, CLI, Markdown
A simple, flexible and powerful ecosystem for creating beautiful documentation.
Source | NodeJS, CLI, Markdown
An easy way to create HTML styleguide for a web project.
Source | Demo | NodeJS, HTML, Static Site Generator
A streamlined tool for developing, documenting and presenting UI pattern libraries.
Source | Demo | NodeJS, Gulp, Handlebards, Static Site Generator
The UIengine is a tool for developers, designers and product owners to create, document and evolve a design system collaboratively. It generates your design system documentation (i.e. pattern library, styleguide or brand manual) and brings the tools to implement the design system in your web site or application.
Source | NodeJS, Gulp, CLI, Markdown, YAML, Templating agnostic (Pug, React/JSX, Handlebars, …)
Easily integrate your pattern library into your web application! Or even just output a static site!
Source | NodeJS, Prototype to Webapp Interface, Static Site Generator, Mustache/Feplet
Developing components. The right way. Generate an interactive UI to develop, preview and document web components.
Source | NodeJS, EJS, Twig, Nunjucks, Babel
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
Test Driven Style Guide Development - Angular (2.x and above). A drop in module to automatically create a living style guide based on the test you write for your components. Bundle with your favorite build tool and you will automatically get a web app where you can view examples of each component together with associated documentation.
Source | Angular (2.x and above), Test Driven Style Guide Development
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
Hologram is a Ruby gem that parses comments in your CSS and turns them into a beautiful style guide.
Demo | *CSS, Ruby, Markdown
Nucleus is a living style guide generator for atomic css based components.
Demo | *SCSS, NodeJS
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
PostCSS plugin. CSS comments will be parsed through Markdown and displayed in a generated HTML document.
Source | CSS, NodeJS, GruntJS, GulpJS, Markdown
PostCSS plugin. Easily create and maintain style guides with CSS comments using Markdown.
Demo | Source | CSS, PostCSS, NodeJS, GruntJS, GulpJS, Markdown
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
Styledown is made to work in most web development setups. It doesn't favor any framework or language or any preprocessor.
Demo | Source | CSS, NodeJS, Markdown
Markdown-styleguide-generator will search all your style files (your .css, .scss _partial.scss, .less, .whatever) for comments and create a html file living style guide for your developers to use.
Source | CSS, Less, Markdown, NodeJS, Gulp, Grunt
Atlas will search comments in scss and regular markdown files and create html structure based on this. It comes with extensive styles monitoring and project reports. It is similar to Hologram.
Source | Demo | NodeJS, Mustache, Markdown, Static Site Generator
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
Demo | Source | GruntJS, HTML patterns
Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure.
Demo | Source | NodeJS, GulpJS, GruntJS, Scss, Less, HTML patterns
These services provide a web-app to generate your styleguide. Some require an account
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)
Service | Service, Login, (Commercial)
Go from stylesheet to styleguide, instantly. Runway parses comments in your CSS/SCSS and deploys a beautiful, shareable styleguide. Choose between multiple themes / syntax highlighting choices, and tweak your styleguide in realtime through an interactive editor.
Service | Service, Login, Free
A Simple style guide generator/template that uses handlebars and markdown syntax. This tool creates documentation for your already developed js and css files.
Source | Grunt, Markdown, highlightJs, Template, Sass, Static Site Generator
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/styleguide/
- UI component playbook
