Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Style Guide Driven Development A Living Style Guide as a Base for Your Frontend
Slide 2
Slide 2 text
[email protected]
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
[email protected]
e-mail twitter blog first name last name