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.

Transcript

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

   View Slide

2. nico@hagenburger.net
   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. nico@hagenburger.net
    e-mail
    twitter
    blog
    first name
    last name
    

    View Slide