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