Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
In Search of the Single Source of Truth @JINA // DEVCONFU // JŪRMALA // 2014
Slide 2
Slide 2 text
@jina
Slide 3
Slide 3 text
Senior Product Designer
Slide 4
Slide 4 text
— NATE FORTIN “A fractured process makes for a fractured user experience.”
Slide 5
Slide 5 text
Style Guides are all the rage …AND THEY HAVE COME A LONG WAY.
Slide 6
Slide 6 text
2004 // PDF Style Guide
Slide 7
Slide 7 text
PDFs are a pain to maintain. HEY, THAT RHYMES.
Slide 8
Slide 8 text
2007–2008 // Wordpress Style Guide
Slide 9
Slide 9 text
alistapart.com/article/writingainterfacestyleguide
Slide 10
Slide 10 text
Design & Brand Standards Front-end Development Standards Keeping Style Guides Current & Useful
Slide 11
Slide 11 text
Wordpress was only slightly easier. …AND NOBODY EXCEPT ME WOULD UPDATE IT.
Slide 12
Slide 12 text
2010–2011 // Living Style Guide with Sass
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Engine Yard App Cloud Style Guide, Early 2011
Slide 15
Slide 15 text
ZOMG!
Slide 16
Slide 16 text
Engine Yard App Cloud Style Guide, Early 2011
Slide 17
Slide 17 text
Sass & Style Guides are awesome together!
Slide 18
Slide 18 text
blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
Slide 19
Slide 19 text
Make Documentation a regular part of your work ow. 01 //
Slide 20
Slide 20 text
Don’t try to document everything at once. YOU’LL LIKELY GIVE UP.
Slide 21
Slide 21 text
Document going forward.
Slide 22
Slide 22 text
Making something new? Document it.
Slide 23
Slide 23 text
Revising something? Refactor it. Then document it.
Slide 24
Slide 24 text
During design & code reviews, make sure decisions are documented.
Slide 25
Slide 25 text
2012–2013 // Living Style Guide with Sass for Web App & Site Github Wiki for iOS & Android
Slide 26
Slide 26 text
Do CSS Style Guide, Late 2013
Slide 27
Slide 27 text
Do Responsive Layout Guide, Early 2013
Slide 28
Slide 28 text
For mobile, changes to colors & sizes were a nightmare to update. PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹
Slide 29
Slide 29 text
Document your ideal CSS Architecture. 02 //
Slide 30
Slide 30 text
vendor/ dependencies/ base/ components/ regions/ helpers/ responsive/ tools/ } my ideal css architecture
Slide 31
Slide 31 text
Make a UI Library. 03 //
Slide 32
Slide 32 text
oocss.org
Slide 33
Slide 33 text
ux.mailchimp.com/patterns
Slide 34
Slide 34 text
Create pages
Slide 35
Slide 35 text
Create systems
Slide 36
Slide 36 text
bradfrostweb.com/blog/post/atomic-web-design
Slide 37
Slide 37 text
01 // Base HTML elements 02 // Modular components 03 // Page regions 04 // Layout system
Slide 38
Slide 38 text
Show the object with all of its associated states.
Slide 39
Slide 39 text
developer.android.com/design
Slide 40
Slide 40 text
developer.android.com/design/building-blocks/seek-bars
Slide 41
Slide 41 text
Show the code you want people to use, not the nal output.
Slide 42
Slide 42 text
Add development tools for rapid development and testing. 04 //
Slide 43
Slide 43 text
starbucks.com/static/reference/styleguide
Slide 44
Slide 44 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 45
Slide 45 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 46
Slide 46 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 47
Slide 47 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 48
Slide 48 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 49
Slide 49 text
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Slide 50
Slide 50 text
Try a responsive sandbox during development.
Slide 51
Slide 51 text
Do Responsive Layout Guide, Early 2013
Slide 52
Slide 52 text
Keep documentation current & useful. 05 //
Slide 53
Slide 53 text
jacobrask.github.io/styledocco
Slide 54
Slide 54 text
2013 // Living Style Guide with Sass + ERB & YAML
Slide 55
Slide 55 text
sass-lang.com
Slide 56
Slide 56 text
sass-lang.com/styleguide
Slide 57
Slide 57 text
github.com/mattkersley/Responsive-Design-Testing
Slide 58
Slide 58 text
sass-lang.com/styleguide/responsive-test
Slide 59
Slide 59 text
We open sourced the website. Anyone can contribute to design.
Slide 60
Slide 60 text
What if a new color gets added? THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.
Slide 61
Slide 61 text
Can the CSS & Style Guide both share the same attributes in one single con guration?
Slide 62
Slide 62 text
Single Source of Truth
Slide 63
Slide 63 text
Don’t Repeat Yourself
Slide 64
Slide 64 text
colors: - name: hopbush hex: "c69" - name: bouquet hex: "b37399" - name: venus hex: "998099" - name: patina hex: "699" - name: nebula hex: "d2e1dd" - name: white hex: "fff" <% data.color.colors.each do |swatch| %> $<%= swatch.name %>: #<%= swatch.hex %>; <% end %> data/color.yml _color.scss.erb
Slide 65
Slide 65 text
colors: - name: hopbush hex: "c69" - name: bouquet hex: "b37399" - name: venus hex: "998099" - name: patina hex: "699" - name: nebula hex: "d2e1dd" - name: white hex: "fff" %ul.swatches - for swatch in data.color.colors %li{class: "swatch-" + swatch.name} %pre %code = "$" + swatch.name %br/ = "#" + swatch.hex data/color.yml _color.haml
Slide 66
Slide 66 text
Sass Color Style Guide
Slide 67
Slide 67 text
2014 // Living Style Guide & Prototype with Sass & Angular as Spec + Living Variables System for All Devices & Platforms
Slide 68
Slide 68 text
sfdc-styleguide.herokuapp.com
Slide 69
Slide 69 text
Prototypes Aura (our web framework) Native iOS Native Android Native Windows
Slide 70
Slide 70 text
How do we keep our colors, spacing, & sizes consistent?
Slide 71
Slide 71 text
Theo BY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!
Slide 72
Slide 72 text
Theo: theme tokenizer with JSON input Sass Stylus LESS Aura plist XML {
Slide 73
Slide 73 text
sfdc-styleguide.herokuapp.com
Slide 74
Slide 74 text
@SalesforceUX
Slide 75
Slide 75 text
dribbble.com/salesforce
Slide 76
Slide 76 text
sass-lang.com
Slide 77
Slide 77 text
@TeamSassDesign
Slide 78
Slide 78 text
dribbble.com/TeamSassDesign
Slide 79
Slide 79 text
themixinsf.com
Slide 80
Slide 80 text
susy.oddbird.net
Slide 81
Slide 81 text
artinmycoffee.com
Slide 82
Slide 82 text
— GUSTAVE FLAUBERT “Be regular and orderly in your life so that you may be violent and original in your work.”
Slide 83
Slide 83 text
T W I T T E R , D R I B B B L E , I N STAG RA M , & G I T H U B @jina