Front-end Style Guides

We shouldn’t be designing websites as pages anymore: we should be designing systems of components. A popular way to think about this is to use Brad Frost’s Atomic Design. A site is divided into tiny pieces that are combined into components, then those components are combined into bigger components. A useful way to look at the system is: Atoms, Molecules, Organisms, Ecosystems. Anna Debenham has an excellent set of Style Guide-related resources.

Starting from this point, and using Style Guide Driven Development can be powerful, and help everyone on the team have their head in the right space for designing and developing for the multi-device world.

Ideally, a Style Guide should be part of your application. The folks at Lonely Planet have done this with Rizzo. If you can’t do this for your application, the next best thing is for the Style Guide and application to use the same CSS and JS files.