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
   

   View Slide

2. Current style guide projects I’m working on
   https://www.homify.de/assets/styleguide.html · http://livingstyleguide.com/eurucamp/
   

   View Slide

3. @LSGorg
   livingstyleguide.org
   

   View Slide

4. nico@hagenburger.net
   email
   twitter
   blog
   first name
   last name
   

   View Slide

5. :( :)
   

   View Slide

6. 504 299 6828
   #styleguide15 5 ftw
   Send
   

   View Slide

7. 70s
   New York City Transit Authority
   http://thestandardsmanual.com
   

   View Slide

8. My-90s-Style-Guide.pdf
   

   View Slide

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

   View Slide

10. Dead Style Guides
    ★ Confusion about latest version
    ★ Hard to distribute
    ★ Hard to edit/change/keep up-to-date
    ★ Perfect for Corporate Design
    

    View Slide

11. Better create a
    Living Style Guide
    

    View Slide

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
    

    View Slide

13. View Slide

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.
    

    View Slide

15. Great. Really?
    

    View Slide

16. CSS was wrong.
    

    View Slide

17. But now we can fix it.
    

    View Slide

18. Separation of 

    content and design 

    (in the 3210 era)
    ★ HTML on one side
    ★ CSS on the other side
    

    View Slide

19. Separation of 

    content and design
    (today)
    ★ HTML on one side
    ★ CSS on the other side
    ★ Data
    

    View Slide

20. HTML can’t live
    without CSS.
    CSS can’t live
    without HTML.
    

    View Slide

21. So do we want HTML
    in the style guide?
    

    View Slide

22. View Slide

23. Maybe not.
    

    View Slide

24. #1
    How to take care of
    changes?
    

    View Slide

25. A change log?
    

    View Slide

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)
    

    View Slide

27. It might mess up.
    

    View Slide

28. #2
    How to take care of
    edge cases?
    

    View Slide

29. What’s an edge case?
    https://twitter.com/thomasfuchs/status/509827616720035840 (thanks to @uanjoze for the link)
    

    View Slide

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
    

    View Slide

31. What do all edge cases
    have in common?
    

    View Slide

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
    

    View Slide

33. DRY
    

    View Slide

34. View Slide

35. Edge case
    

    View Slide

36. What’s an edge case?
    Nahasapeemapetilon
    

    View Slide

37. If we extract the
    template, the back-
    end developer has to
    copy the ID, not a
    bunch of HTML.
    

    View Slide

38. We just defined, what
    we call an API.
    

    View Slide

39. An API is easy to test.
    A front end is not.
    

    View Slide

40. APIs
    ★ One specified “call” per action
    ★ Specified input, output, and name/URL/ID
    ★ Written tests for every action
    

    View Slide

41. Style Guide APIs
    ★ One specified “template” per action
    ★ Specified input, output, and ID
    !
    ★ We just need the tests
    

    View Slide

42. Take screenshots
    

    View Slide

43. Before committing
    ★ Automatically take a “screenshot” of every
    example
    ★ Include all edge cases
    ★ Compare before/after
    ★ Warn for every change
    

    View Slide

44. The most important information in testing CSS:
    Did I break anything?
    

    View Slide

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, …
    

    View Slide

46. Not to miss anything:
    What’s a Style Guide
    good for?
    

    View Slide

47. Designers
    External
    Designers
    HR
    Front-end
    developers
    Back-end
    developers
    QA
    

    View Slide

48. Designers
    External
    Designers
    HR
    Front-end
    developers
    Back-end
    developers
    QA
    

    View Slide

49. Designers
    External
    Designers
    HR
    Front-end
    developers
    and
    designers
    Back-end
    developers
    QA
    

    View Slide

50. How to make
    everybody happy?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

53. The vision for
    Style Guides in 2015:
    

    View Slide

54. It’s simply an
    API.
    

    View Slide

55. Database
    Style Guide
    Data API
    Mobile App
    Watch App*
    Website
    * it’s 2015 ;)
    

    View Slide

56. Independent.
    Easy to use.
    Maintainable.
    Testable.
    

    View Slide

57. (And that beautiful
    it spreads the world.)
    

    View Slide

58. One
    more
    thing!
    !
    Sketchnotes
    by @jessabean
    

    View Slide

59. Photo by @HenriHelvetica
    https://twitter.com/henrihelvetica/status/521744078300405761
    

    View Slide

60. nico@hagenburger.net
    email
    twitter
    blog
    first name
    last name
    Thank you :)
    

    View Slide