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.

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?
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
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