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
   

   View Slide

2. Building website is like building a house
   

   View Slide

3. Don’t build pages
   

   View Slide

4. Build a system
   of components
   

   View Slide

5. Why a style guide?
   • Consistency in design and code
   • Reference for the whole team
   • Speed up development time
   

   View Slide

6. How to start?
   

   View Slide

7. View Slide

8. 1. Analyse your site
   

   View Slide

9. Common components
   • Typography
   • Links
   • Lists
   • Boxes and background colours
   • Buttons
   • Forms
   

   View Slide

10. Typography Links
    Lists Boxes
    

    View Slide

11. 2. Create your
    components
    

    View Slide

12. Components folder
    list.handlebars
    _listInline.scss
    

    View Slide

13. Component style guide
    

    View Slide

14. View Slide

15. 3. Maintain it
    

    View Slide

16. Ooopse!
    

    View Slide

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
    

    View Slide

18. View Slide