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.
* 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.
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.