Living CSS Style Guides & Pattern Libraries

June 4th, 2012

Living CSS Style Guides & Pattern Libraries
A number of tools have recently sprung up with the aim of generating and maintaining one’s own CSS Pattern Libraries or CSS Style Guides. Living front-end CSS style guides can especially be quite powerful if done right. Guides help to decrease the amount of UI waste that is generated by minimizing the need for detailing similar screens over and over and relying instead on reusable elements. Detailed visual mockups still make sense for a few initial stylistic explorations. However, when teams over rely on detailed screens to communicate UI ideas, things start to duplicate, fragment and slow down. Living CSS guides are tools that could potentially work with wireframes, by placing common emerging UI elements and patterns into one shared place.

Here are a few interesting and emerging tools which I found that might help with starting your own CSS Pattern Library:

  1. Pea.rs by Dan Cederholm (github) – a WordPress theme that basically turns your blog entries into interface pattern pairs of HTML & CSS. It comes with a few default patterns and the UI looks slick. The one disadvantage is that people would still have to transform the pattern library from WordPress into a real workable common.css file that could be used on a real project. So for maintainability, the pattern library and the actual CSS is a bit disconnected.
  2. Knyle Style Sheets by Kyle Neath (github) – a documentation standard for writing more understandable CSS which auto generates a style guide. You start off by writing your CSS and then with some Ruby on Rails help, the CSS file can be automatically turned into a guide.
  3. Pattern Response by Luke Brooker (github) – a PHP script that takes patterns defined from folders and generates a style guide. Each pattern can be composed of HTML, CSS and a potential description.
  4. Pattern-Primer by Jeremy Keith (github) – also a PHP script which automatically generates CSS patterns.
  5. Kalei Style Guide by Thomas Davis (github) – this project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks.

Credits: Dan Cederholm, Kyle Neath, Luke Brooker, Jeremy Keith and Thomas Davis

4 Responses to “Living CSS Style Guides & Pattern Libraries”

  1. janogarcia Says:

    Some lightweight alternatives:

    Kalei: extremely simple to setup and use, lightweight, no dependencies. http://thomasdavis.github.com/kalei/

    tdcss.js: no dependencies.
    https://github.com/jakobloekke/tdcss.js

    StyleDocco: requires node.js.
    http://jacobrask.github.com/styledocco/

  2. Thomas Davis Says:

    Thanks for the link to Kalei, StyleDocco has some great ideas that I will try to bring in over the weekend.

    Also have a domain now – http://kaleistyleguide.com/

  3. janogarcia Says:

    As much as I liked KSS (Knyle Style Sheets), I never got to use it, because of the relatively complex setup. I didn't even bother to install it.

    Then KSS was followed by other server-side scripting solutions like Pattern-Primer (standalone PHP) and Pea.rs (WordPress).

    But I kept searching/waiting for a JavaScript based solution, which should be simple to setup and use, lightweight, and didn't require any server-side scripting.

    So when I saw Kalei I knew it was the closest thing to what I was looking for.

    It is great to know that you'll be taking some ideas from StyleDocco/Docco!

    Thanks for your work. Really appreciated.

  4. Janne Lammi Says:

    These are all great tools. A hosted alternative for these is Patternry, a service we created to make building pattern libraries and other front-end resources simple: http://patternry.com