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

Style Guides: Why I love them

Susan Robertson
September 18, 2013

Style Guides: Why I love them

A talk given at RefreshPDX on how I came to love style guides and why I think they are an essential part of a site or application.

Susan Robertson

September 18, 2013

Other Decks in Design


  1. Style Guides: Why I love them susanjeanrobertson.com @susanjrobertson

  2. How I define style guide: ‣Not a brand guideline ‣A

    living document ‣Made with the site/application code ‣You could also call it a pattern library
  3. First Glimpse An Event Apart 2011 - Mailchimp http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/

  4. 24 Ways, Anna Debenham

  5. Starbucks Guide http://www.starbucks.com/static/reference/styleguide/

  6. Guides start popping up

  7. The Workflow - Waterfall


  9. ASK

  10. BUILD



  13. Benefits

  14. Reference for the whole team

  15. Code Benefits ‣Find inconsistencies early in the project ‣Cleaner HTML

    and CSS ‣Easier testing cross browser ‣Performance improvements from reusing code
  16. Code as a system Modular CSS become a system of

    building blocks
  17. Fast build outs

  18. Nice deliverable for client http://daverupert.com/2013/04/responsive-deliverables/

  19. Workflow - Agile

  20. Editorially - no style guide

  21. Because, this

  22. Create style guide to learn

  23. Changes as application does

  24. Common language

  25. Use to make prototypes

  26. Where I am at now

  27. Live guide [Open Browser for the live guide]

  28. Resources

  29. Anna’s Gimmebar https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

  30. Anna’s roundup http://maban.co.uk/66

  31. South Tees Hospital http://southtees.nhs.uk/style-guide/

  32. Starbucks

  33. BBC Global Experience

  34. Boilerplate http://www.brettjankord.com/2013/03/07/style-guide-boilerplate/

  35. Automations tools ‣https://github.com/kneath/kss ‣https://github.com/trulia/hologram ‣https://github.com/filamentgroup/X-rayHTML

  36. When you have one.....

  37. Thank you susanjeanrobertson.com @susanjrobertson