A Vision for Style Guides in 2015

A Vision for Style Guides in 2015

28e1c6e895146e8217caf14eb56feb7b?s=128

Nico Hagenburger

October 13, 2014
Tweet

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
  13. None
  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?

  22. None
  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

  34. None
  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

    :)