Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Vision for Style Guides in 2015

A Vision for Style Guides in 2015

Nico Hagenburger

October 13, 2014
Tweet

More Decks by Nico Hagenburger

Other Decks in Programming

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. [email protected]
    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. [email protected]
    email
    twitter
    blog
    first name
    last name
    Thank you :)

    View Slide