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
2.9k
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
160
Automating EE Bootstrapping and Deployment
mattfordham
2
220
Frame Animation in the Browser
mattfordham
2
200
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
471
290k
How to Ace a Technical Interview
jacobian
274
23k
Code Reviewing Like a Champion
maltzj
517
39k
Side Projects
sachag
451
42k
Become a Pro
speakerdeck
PRO
15
4.8k
The Mythical Team-Month
searls
217
43k
Web Components: a chance to create the future
zenorocha
307
41k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
GraphQLとの向き合い方2022年版
quramy
36
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
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