Style Guide Driven Development

Slide 1

Slide 1 text

Style Guide Driven Development A Living Style Guide as a Base for Your Frontend

Slide 2

Slide 2 text

nico@hagenburger.net e-mail twitter blog first name last name

Slide 3

Slide 3 text

Let’s start with the style guide.

Slide 4

Slide 4 text

A typical style guide:

Slide 5

Slide 5 text

Cool-Company-Styleguide.pdf

Slide 6

Slide 6 text

#NOT

Slide 7

Slide 7 text

A typical style guide:

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Probably Made With:

Slide 10

Slide 10 text

That’s a Dead Style Guide

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Better create a Living Style Guide

Slide 13

Slide 13 text

Living Style Guides ★ Are made with HTML and CSS ★ Use the production CSS ★ Separate design and code ★ Are under Version Control (GIT)

Slide 14

Slide 14 text

Real Life Code ★ Includes interaction like :hover/:action

Slide 15

Slide 15 text

Real Life Code ★ Inspect element to see the HTML and classes

Slide 16

Slide 16 text

Coding Style ★ .class-names, modules, …

Slide 17

Slide 17 text

Colors and Variables ★ If you are clever, that automates on the fly ;)

Slide 18

Slide 18 text

Clever $Variables $my-color: #89cd52; .$my-color:before { content: $my-color; }

$my-color:

Slide 19

Slide 19 text

You are using Sass, right? :)

Slide 20

Slide 20 text

But this talk is not about technical details.

Slide 21

Slide 21 text

Doing Style Guide Driven Development

Slide 22

Slide 22 text

Why?

Slide 23

Slide 23 text

I’m a developer.

Slide 24

Slide 24 text

I’m a designer.

Slide 25

Slide 25 text

Let’s combine it.

Slide 26

Slide 26 text

A Perfect Project ★ Concepts first ★ Design right after ★ Design turns into CSS ★ Backend developer picks out of examples

Slide 27

Slide 27 text

A Real Project ★ 3 months planned for coding ★ Design delivered in the 12th week (Happened that way.)

Slide 28

Slide 28 text

After 7 Days ★ Most designs available as CSS dummy ★ Backend implemented dummies in project ★ A lot of stuff was done

Slide 29

Slide 29 text

Separating design and development

Slide 30

Slide 30 text

The CSS Dev: ★ No setup needed (databases, …) ★ Dummy data is self made ★ No development problems ★ No merge conflicts

Slide 31

Slide 31 text

The Backend Dev: ★ Knows how it should look in advance ★ Just needs to pick the right stuff ★ Will love you!

Slide 32

Slide 32 text

OK, in a perfect world :)

Slide 33

Slide 33 text

More cool stuff

Slide 34

Slide 34 text

Browser testing incl.

Slide 35

Slide 35 text

All Elements in One Page ★ Just open the style guide in every browser ★ Most issues should occur there

Slide 36

Slide 36 text

Consistency incl.

Slide 37

Slide 37 text

Add New Elements ★ Just scroll up and down if it fits to the rest ★ If not, change

Slide 38

Slide 38 text

Some hints

Slide 39

Slide 39 text

Hints ★ Have a coding style guide ★ Have a system for naming classes etc. ★ Think about how to structure modules ★ Let all modules be independent

Slide 40

Slide 40 text

Any questions?

Slide 41

Slide 41 text

nico@hagenburger.net e-mail twitter blog first name last name