Tweet
Tweet

Slide 1

Slide 1 text

A Vision for Style Guides in 2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@LSGorg livingstyleguide.org

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

:( :)

Slide 6

Slide 6 text

504 299 6828 #styleguide15 5 ftw Send

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

My-90s-Style-Guide.pdf

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Better create a Living Style Guide

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Great. Really?

Slide 16

Slide 16 text

CSS was wrong.

Slide 17

Slide 17 text

But now we can fix it.

Slide 18

Slide 18 text

Separation of 
 content and design 
 (in the 3210 era) ★ HTML on one side ★ CSS on the other side

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

So do we want HTML in the style guide?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Maybe not.

Slide 24

Slide 24 text

#1 How to take care of changes?

Slide 25

Slide 25 text

A change log?

Slide 26

Slide 26 text

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)

Slide 27

Slide 27 text

It might mess up.

Slide 28

Slide 28 text

#2 How to take care of edge cases?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

What do all edge cases have in common?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

DRY

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Edge case

Slide 36

Slide 36 text

What’s an edge case? Nahasapeemapetilon

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

We just defined, what we call an API.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Take screenshots

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

How to make everybody happy?

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

The vision for Style Guides in 2015:

Slide 54

Slide 54 text

It’s simply an API.

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Independent. Easy to use. Maintainable. Testable.

Slide 57

Slide 57 text

(And that beautiful it spreads the world.)

Slide 58

Slide 58 text

One more thing! ! Sketchnotes by @jessabean

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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