Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Styleguide Driven Development
mattfordham
October 17, 2014
13
2.6k
Styleguide Driven Development
Presented at Seattle Interactive Conference 2014
mattfordham
October 17, 2014
Tweet
Share
More Decks by mattfordham
See All by mattfordham
Confessions of an Apprehensive Technical Director
mattfordham
11
260
Automating EE Bootstrapping and Deployment
mattfordham
3
150
Automating EE Bootstrapping and Deployment
mattfordham
2
210
Frame Animation in the Browser
mattfordham
2
130
Featured
See All Featured
The Invisible Customer
myddelton
110
11k
Thoughts on Productivity
jonyablonski
43
2.2k
Debugging Ruby Performance
tmm1
65
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Robots, Beer and Maslow
schacon
152
7.1k
Making Projects Easy
brettharned
98
4.3k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
Happy Clients
brianwarren
89
5.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Transcript
Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014
What? Why? How?
3 MATT FORDHAM PARTNER & TECHNICAL DIRECTOR WWW.WINTR.US / @MATTFORDHAM
None
5
6 The traditional styleguide
7 “Mock-ups”, “Comps”, etc
8 The old way ✴ Duplication of code ✴ Inconsistent
code style ✴ Poorly named classes ✴ Visual bugs, regressions ✴ Inconsistent visual system ✴ Generally unmaintainable and expensive
9 A styleguide, in this context, is a developed, “living”
UI library containing all recurring styles used across a project. Styleguide Driven Development is the practice of using the styleguide as the focal point for all front-end UI development tasks. What?
10 Why? Separate content from styling Meter Block (MailChimp) Section
Block (Starbucks)
11 Why? Intent and usage are documented and clear for
all to see Salesforce Twitter Bootstrap
12 Why? Unification and documentation of design variables Salesforce Colors,
padding, margins, font styles, etc
13 Why? ✴ Quicker page build-out ✴ Quicker manual testing
Yelp
14 Why? ✴ Agile-friendly ✴ Easier collaboration for teams
15 Why? It’s technically better! Less redundant CSS = Smaller
file size
16 How? Take an inventory of design (so far) ✴
Colors? ✴ Header levels? ✴ Grid system? ✴ What modules should be created? ✴ How should things be named?
17 How? Define a structure and choose tools ✴ User
a CSS preprocessor (Sass, Stylus, etc) ✴ Use partials, if available
18 How? Use documented code style ✴ Routinely maintained and
version-controlled ✴ Include comments and todos
19 How? Style all base HTML elements Yelp html-ipsum.com ✴
h1, p, ul, ol, li, etc
20 How? Build custom modules ✴ Modules are the heart
of the styleguide ✴ Use a system (BEM, SMACSS, OOCSS) ✴ Make modules small ✴ Make modules versatile
21 How? Module example: The Media Object http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
22
23 How? Document module usage (use a Styleguide generator) Trulia’s
Hologram
24 How? Finally, build some pages and add “glue”, if
necessary
25 Before ✴ What markup and CSS do I need?
After ✴ What modules is this page made of? ✴ Do I need to create any new ones? ✴ Future modules and pages start in styleguide The process
26 Examples ✴ Yelp - http://www.yelp.com/styleguide ✴ MailChimp - http://ux.mailchimp.com/patterns/
✴ Salesforce - http://sfdc-styleguide.herokuapp.com/ ✴ Github - https://github.com/styleguide/css/1.0 ✴ Bootstrap - http://getbootstrap.com/components/
27 Resources ✴ http://alistapart.com/article/creating-style-guides ✴ http://vinspee.me/style-guide-guide/ ✴ http://webuild.envato.com/blog/styleguide-driven-development/ ✴ http://vimeo.com/86928424
Thank you! @MATTFORDHAM / WWW.WINTR.US