Pro Yearly is on sale from $80 to $50! »

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.

7d86093feb64d21538561ea2c071a89e?s=128

Fiona Chan

March 28, 2013
Tweet

Transcript

  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