Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to create a living style guide

7d86093feb64d21538561ea2c071a89e?s=47 Fiona Chan
March 28, 2013

How to create a living style guide

A short presentation around the steps to take to create a living style guide.

This was presented at Web Directions What Do You Know 2013.


Fiona Chan

March 28, 2013

More Decks by Fiona Chan

Other Decks in Design


  1. How to create a living style guide Fiona Chan @mobywhale

  2. Building website is like building a house

  3. Don’t build pages

  4. Build a system of components

  5. Why a style guide? • Consistency in design and code

    • Reference for the whole team • Speed up development time
  6. How to start?

  7. None
  8. 1. Analyse your site

  9. Common components • Typography • Links • Lists • Boxes

    and background colours • Buttons • Forms
  10. Typography Links Lists Boxes

  11. 2. Create your components

  12. Components folder list.handlebars _listInline.scss

  13. Component style guide

  14. None
  15. 3. Maintain it

  16. Ooopse!

  17. Extra resources • Front-end style guides http://24ways.org/2011/front-end-style-guides/ • Front-end style

    guide collection https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides • Making Front-end Development a Team Sport http://cognition.happycog.com/article/making-front-end-development-a-team-sport
  18. None