Style Guides: Why I love them

A326541beb370a5841565c97022c2a94?s=47 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.

A326541beb370a5841565c97022c2a94?s=128

Susan Robertson

September 18, 2013
Tweet

Transcript

  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

  8. VISUAL INVENTORY

  9. ASK

  10. BUILD

  11. MODULAR CODE

  12. DESIGNOVELOPMENT

  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