A Vision for Style Guides in 2015

Talk given at CSSDevConf 2014 and NightlyBuild.io 2014. The slides contain additional information and links that were mentioned during the talk.

Video recording by NightlyBuild.io:
http://www.youtube.com/watch?v=heVxgbsiybw&feature=youtu.be

Links

* https://twitter.com/hagenburger/
* http://www.hagenburger.net
* https://www.homify.de/assets/styleguide.html
* http://livingstyleguide.com/eurucamp/
* http://livingstyleguide.org
* https://twitter.com/LSGorg
* http://thestandardsmanual.com
* https://twitter.com/thomasfuchs/status/509827616720035840
* https://twitter.com/uanjoze
* https://github.com/hagenburger/livingstyleguide
* https://twitter.com/jessabean
* https://twitter.com/henrihelvetica/status/521744078300405761

Transcript

1. A Vision for
   Style Guides in 2015
2. Current style guide projects I’m working on https://www.homify.de/assets/styleguide.html · http://livingstyleguide.com/eurucamp/
3. @LSGorg livingstyleguide.org
4. nico@hagenburger.net email twitter blog first name last name
5. :( :)
6. 504 299 6828 #styleguide15 5 ftw Send
7. 70s New York City Transit Authority http://thestandardsmanual.com
8. My-90s-Style-Guide.pdf
9. Cool-Company-Styleguide-v2.pdf Cool-Company-Styleguide-latest.pdf Cool-Company-Styleguide-1997- updated.pdf Cool-Company-Styleguide- ENGLISH.pdf
10. Dead Style Guides ★ Confusion about latest version ★ Hard to distribute ★ Hard to edit/change/keep up-to-date ★ Perfect for Corporate Design
11. Better create a
    Living Style Guide
12. Living Style Guides ★ Are made with HTML and CSS ★ Use the production CSS ★ Are under version control (GIT) ★ Separate design and code ★ Automate as much as possible
14. Back-end Developers ★ Will love it, when they don’t have to care about CSS ★ Will love it, when they can start functionality right with something looking good.
15. Great. Really?
16. CSS was wrong.
17. But now we can fix it.
18. Separation of 
 content and design 
 (in the 3210 era) ★ HTML on one side ★ CSS on the other side
19. Separation of 
 content and design (today) ★ HTML on one side ★ CSS on the other side ★ Data
20. HTML can’t live without CSS. CSS can’t live without HTML.
21. So do we want HTML in the style guide?
23. Maybe not.
24. #1 How to take care of changes?
25. A change log?
26. Show all versions? v31.2.0 v16.1.3 v8.5.0 A concept for versioning in style guides (developed in 2013, never implemented in a real project)
27. It might mess up.
28. #2 How to take care of edge cases?
29. What’s an edge case? https://twitter.com/thomasfuchs/status/509827616720035840 (thanks to @uanjoze for the link)
30. What’s an edge case? ★ Having the same HTML with different amount of text ★ Having the same HTML without image (user with no profile image) ★ Having the same HTML with too small image
31. What do all edge cases have in common?
32. What’s an edge case? ★ Having the same HTML with different amount of text ★ Having the same HTML without image (user with no profile image) ★ Having the same HTML with too small image
33. DRY
35. Edge case
36. What’s an edge case? Nahasapeemapetilon
37. If we extract the template, the back- end developer has to copy the ID, not a bunch of HTML.
38. We just defined, what we call an API.
39. An API is easy to test. A front end is not.
40. APIs ★ One specified “call” per action ★ Specified input, output, and name/URL/ID ★ Written tests for every action
41. Style Guide APIs ★ One specified “template” per action ★ Specified input, output, and ID ! ★ We just need the tests
42. Take screenshots
43. Before committing ★ Automatically take a “screenshot” of every example ★ Include all edge cases ★ Compare before/after ★ Warn for every change
44. The most important information in testing CSS: Did I break anything?
45. Each template 
 should have: ★ The HTML ★ The CSS ★ Normal examples ★ Edge cases ★ Reference screen shots _user.mustache _user.scss _user.md _user.md + @test _user-1.png, _user-2.png, …
46. Not to miss anything: What’s a Style Guide good for?
47. Designers External Designers HR Front-end developers Back-end developers QA
48. Designers External Designers HR Front-end developers Back-end developers QA
49. Designers External Designers HR Front-end developers and designers Back-end developers QA
50. How to make everybody happy?
51. Show code/data/… ★ For front-end developers: show HTML, variables, mixins, @extend templates, … ★ For back-end developers: show data structure ★ For QA: show all edge cases ★ For designers: show colors and fonts ★ For HR: show your quality work
52. Mark edge cases: @test @template _my-template.hbs @data { name: "Homer" } Will most likely be implemented in the LivingStyleGuide Gem. https://github.com/hagenburger/livingstyleguide
53. The vision for Style Guides in 2015:
54. It’s simply an API.
55. Database Style Guide Data API Mobile App Watch App* Website * it’s 2015 ;)
56. Independent. Easy to use. Maintainable. Testable.
57. (And that beautiful it spreads the world.)
58. One more thing! ! Sketchnotes by @jessabean
59. Photo by @HenriHelvetica https://twitter.com/henrihelvetica/status/521744078300405761
60. nico@hagenburger.net email twitter blog first name last name Thank you :)