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

How to create a living style guide

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
Tweet

More Decks by Fiona Chan

Other Decks in Design

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