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. Dead Style Guides ★ Confusion about latest version ★ Hard

    to distribute ★ Hard to edit/change/keep up-to-date
  2. Living Style Guides ★ Are made with HTML and CSS

    ★ Use the production CSS ★ Separate design and code ★ Are under Version Control (GIT)
  3. Clever $Variables $my-color: #89cd52; .$my-color:before { content: $my-color; } <p>

    <var>$my-color</var>: <code class="$my-color"></code> </p>
  4. A Perfect Project ★ Concepts first ★ Design right after

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

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

    ★ Backend implemented dummies in project ★ A lot of stuff was done
  7. The CSS Dev: ★ No setup needed (databases, …) ★

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

    advance ★ Just needs to pick the right stuff ★ Will love you!
  9. All Elements in One Page ★ Just open the style

    guide in every browser ★ Most issues should occur there
  10. Add New Elements ★ Just scroll up and down if

    it fits to the rest ★ If not, change
  11. Hints ★ Have a coding style guide ★ Have a

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