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
3k
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
300
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
220
Frame Animation in the Browser
mattfordham
2
200
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Designing for humans not robots
tammielis
249
25k
Making the Leap to Tech Lead
cromwellryan
131
8.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
230
The World Runs on Bad Software
bkeepers
PRO
65
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
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