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

Style Guide Driven Development

Style Guide Driven Development

How to combine traditional style guides and experiences made in developing websites to living style guides and the concept of style guide driven design.

Nico Hagenburger

December 11, 2012

More Decks by Nico Hagenburger

Other Decks in Programming


  1. Style Guide Driven Development A Living Style Guide as a

    Base for Your Frontend
  2. [email protected] e-mail twitter blog first name last name

  3. Let’s start with the style guide.

  4. A typical style guide:

  5. Cool-Company-Styleguide.pdf

  6. #NOT

  7. A typical style guide:

  8. Cool-Company-Styleguide-v2.pdf Cool-Company-Styleguide-latest.pdf Cool-Company-Styleguide-1997- updated.pdf Cool-Company-Styleguide- ENGLISH.pdf

  9. Probably Made With:

  10. That’s a Dead Style Guide

  11. Dead Style Guides ★ Confusion about latest version ★ Hard

    to distribute ★ Hard to edit/change/keep up-to-date
  12. Better create a Living Style Guide

  13. Living Style Guides ★ Are made with HTML and CSS

    ★ Use the production CSS ★ Separate design and code ★ Are under Version Control (GIT)
  14. Real Life Code ★ Includes interaction like :hover/:action

  15. Real Life Code ★ Inspect element to see the HTML

    and classes
  16. Coding Style ★ .class-names, modules, …

  17. Colors and Variables ★ If you are clever, that automates

    on the fly ;)
  18. Clever $Variables $my-color: #89cd52; .$my-color:before { content: $my-color; } <p>

    <var>$my-color</var>: <code class="$my-color"></code> </p>
  19. You are using Sass, right? :)

  20. But this talk is not about technical details.

  21. Doing Style Guide Driven Development

  22. Why?

  23. I’m a developer.

  24. I’m a designer.

  25. Let’s combine it.

  26. A Perfect Project ★ Concepts first ★ Design right after

    ★ Design turns into CSS ★ Backend developer picks out of examples
  27. A Real Project ★ 3 months planned for coding ★

    Design delivered in the 12th week (Happened that way.)
  28. After 7 Days ★ Most designs available as CSS dummy

    ★ Backend implemented dummies in project ★ A lot of stuff was done
  29. Separating design and development

  30. The CSS Dev: ★ No setup needed (databases, …) ★

    Dummy data is self made ★ No development problems ★ No merge conflicts
  31. The Backend Dev: ★ Knows how it should look in

    advance ★ Just needs to pick the right stuff ★ Will love you!
  32. OK, in a perfect world :)

  33. More cool stuff

  34. Browser testing incl.

  35. All Elements in One Page ★ Just open the style

    guide in every browser ★ Most issues should occur there
  36. Consistency incl.

  37. Add New Elements ★ Just scroll up and down if

    it fits to the rest ★ If not, change
  38. Some hints

  39. Hints ★ Have a coding style guide ★ Have a

    system for naming classes etc. ★ Think about how to structure modules ★ Let all modules be independent
  40. Any questions?

  41. [email protected] e-mail twitter blog first name last name