How to combine traditional style guides and experiences made in developing websites to living style guides and the concept of style guide driven design.
Style GuideDriven DevelopmentA Living Style Guide as a Base for Your Frontend
View Slide
[email protected]e-mailtwitterblogfirst namelast name
Let’s start with thestyle guide.
A typical style guide:
Cool-Company-Styleguide.pdf
#NOT
Cool-Company-Styleguide-v2.pdfCool-Company-Styleguide-latest.pdfCool-Company-Styleguide-1997-updated.pdfCool-Company-Styleguide-ENGLISH.pdf
Probably Made With:
That’s aDead Style Guide
Dead Style Guides★ Confusion about latest version★ Hard to distribute★ Hard to edit/change/keep up-to-date
Better create aLiving Style Guide
Living Style Guides★ Are made with HTML and CSS★ Use the production CSS★ Separate design and code★ Are under Version Control (GIT)
Real Life Code★ Includes interaction like :hover/:action
Real Life Code★ Inspect element to see the HTML and classes
Coding Style★ .class-names, modules, …
Colors and Variables★ If you are clever, that automates on the fly ;)
Clever $Variables$my-color: #89cd52;.$my-color:before {content: $my-color;}$my-color:
You are using Sass,right? :)
But this talk is notabout technical details.
DoingStyle Guide DrivenDevelopment
Why?
I’m a developer.
I’m a designer.
Let’s combine it.
A Perfect Project★ Concepts first★ Design right after★ Design turns into CSS★ Backend developer picks out of examples
A Real Project★ 3 months planned for coding★ Design delivered in the 12th week(Happened that way.)
After 7 Days★ Most designsavailable asCSS dummy★ Backendimplementeddummies inproject★ A lot of stuffwas done
Separating designand development
The CSS Dev:★ No setup needed (databases, …)★ Dummy data is self made★ No development problems★ No merge conflicts
The Backend Dev:★ Knows how it should look in advance★ Just needs to pick the right stuff★ Will love you!
OK,in a perfect world :)
More cool stuff
Browser testing incl.
All Elementsin One Page★ Just open thestyle guide inevery browser★ Most issuesshould occurthere
Consistency incl.
Add NewElements★ Just scroll upand down if itfits to the rest★ If not, change
Some hints
Hints★ Have a coding style guide★ Have a system for naming classes etc.★ Think about how to structure modules★ Let all modules be independent
Any questions?