Jump to menu

Vote up?

  1. Chris Coyier

    I love that style guides and documentation has been more of a hot topic lately. Yay!

    I’ve been doing a lot of work in this area lately and have a few random thoughts to share.

    * Make a real, live, accessible-by-everyone-who-works-there page that is your style guide.

    * Make that page use the real HTML/CSS/JavaScript that the real production site uses.

    * Make it just one big long page. Put every single possible element and design pattern you intend to use on it. This will help weed out potential conflicts.

    * Break up resources by pattern
    tabs.html – tabs.css – tabs.js – tabs-sprite.png
    grids.html – grids.css
    accordion.html – accordion.css – accordion.js

    * Production resources serve 1) global assets that are concatenated/minified versions of the most common patterns 2) page specific assets that are concatenated/minified versions of less common patterns

    * Base all patterns on real developer needs, not perceived or theoretical needs.

    If you do it right, the end result is a site with good visual consistency that is easier and faster to develop for.