$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Nico Hagenburger

Other Decks in Programming

Transcript

  1. Style Guide
    Driven Development
    A Living Style Guide as a Base for Your Frontend

    View Slide

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

    View Slide

  3. Let’s start with the
    style guide.

    View Slide

  4. A typical style guide:

    View Slide

  5. Cool-Company-Styleguide.pdf

    View Slide

  6. #NOT

    View Slide

  7. A typical style guide:

    View Slide

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

    View Slide

  9. Probably Made With:

    View Slide

  10. That’s a
    Dead Style Guide

    View Slide

  11. Dead Style Guides
    ★ Confusion about latest version
    ★ Hard to distribute
    ★ Hard to edit/change/keep up-to-date

    View Slide

  12. Better create a
    Living Style Guide

    View Slide

  13. Living Style Guides
    ★ Are made with HTML and CSS
    ★ Use the production CSS
    ★ Separate design and code
    ★ Are under Version Control (GIT)

    View Slide

  14. Real Life Code
    ★ Includes interaction like :hover/:action

    View Slide

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

    View Slide

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

    View Slide

  17. Colors and Variables
    ★ If you are clever, that automates on the fly ;)

    View Slide

  18. Clever $Variables
    $my-color: #89cd52;
    .$my-color:before {
    content: $my-color;
    }

    $my-color:


    View Slide

  19. You are using Sass,
    right? :)

    View Slide

  20. But this talk is not
    about technical details.

    View Slide

  21. Doing
    Style Guide Driven
    Development

    View Slide

  22. Why?

    View Slide

  23. I’m a developer.

    View Slide

  24. I’m a designer.

    View Slide

  25. Let’s combine it.

    View Slide

  26. A Perfect Project
    ★ Concepts first
    ★ Design right after
    ★ Design turns into CSS
    ★ Backend developer picks out of examples

    View Slide

  27. A Real Project
    ★ 3 months planned for coding
    ★ Design delivered in the 12th week
    (Happened that way.)

    View Slide

  28. After 7 Days
    ★ Most designs
    available as
    CSS dummy
    ★ Backend
    implemented
    dummies in
    project
    ★ A lot of stuff
    was done

    View Slide

  29. Separating design
    and development

    View Slide

  30. The CSS Dev:
    ★ No setup needed (databases, …)
    ★ Dummy data is self made
    ★ No development problems
    ★ No merge conflicts

    View Slide

  31. The Backend Dev:
    ★ Knows how it should look in advance
    ★ Just needs to pick the right stuff
    ★ Will love you!

    View Slide

  32. OK,
    in a perfect world :)

    View Slide

  33. More cool stuff

    View Slide

  34. Browser testing incl.

    View Slide

  35. All Elements
    in One Page
    ★ Just open the
    style guide in
    every browser
    ★ Most issues
    should occur
    there

    View Slide

  36. Consistency incl.

    View Slide

  37. Add New
    Elements
    ★ Just scroll up
    and down if it
    fits to the rest
    ★ If not, change

    View Slide

  38. Some hints

    View Slide

  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

    View Slide

  40. Any questions?

    View Slide

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

    View Slide