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

Tags: opensource
Posted in Tools | 4 Comments »