24 ways to impress your friends

Jump to menu

Vote down?

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.