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
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Why Our Code Smells
bkeepers
PRO
335
57k
It's Worth the Effort
3n
183
28k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Facilitating Awesome Meetings
lara
50
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Your Own Lightsaber
phodgson
103
6.1k
Designing Experiences People Love
moore
138
23k
Scaling GitHub
holman
458
140k
Music & Morning Musume
bryan
46
6.2k
The Cult of Friendly URLs
andyhume
78
6.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