Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Styleguide Driven Development
Search
mattfordham
October 17, 2014
13
3.1k
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
340
Automating EE Bootstrapping and Deployment
mattfordham
3
180
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Frame Animation in the Browser
mattfordham
2
210
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Writing Fast Ruby
sferik
629
62k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Building an army of robots
kneath
305
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Designing for humans not robots
tammielis
254
26k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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