Talk given at DevConFu.
In Search of theSingle Sourceof Truth@JINA // DEVCONFU // JŪRMALA // 2014
View Slide
@jina
Senior Product Designer
— NATE FORTIN“A fractured processmakes for a fractureduser experience.”
Style Guidesare all the rage…AND THEY HAVE COME A LONG WAY.
2004 // PDF Style Guide
PDFs are a painto maintain.HEY, THAT RHYMES.
2007–2008 // Wordpress Style Guide
alistapart.com/article/writingainterfacestyleguide
Design & Brand StandardsFront-end Development StandardsKeeping Style Guides Current & Useful
Wordpress wasonly slightly easier.…AND NOBODY EXCEPT ME WOULD UPDATE IT.
2010–2011 // Living Style Guide with Sass
Engine Yard App Cloud Style Guide, Early 2011
ZOMG!
Sass & Style Guidesare awesome together!
blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
Make Documentationa regular part ofyour work ow.01 //
Don’t try to documenteverything at once.YOU’LL LIKELY GIVE UP.
Documentgoing forward.
Makingsomething new?Document it.
Revising something?Refactor it.Then document it.
During design & codereviews, make suredecisions are documented.
2012–2013 // Living Style Guide with Sass for Web App & SiteGithub Wiki for iOS & Android
Do CSS Style Guide, Late 2013
Do Responsive Layout Guide, Early 2013
For mobile, changes tocolors & sizes were anightmare to update.PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹
Document your idealCSS Architecture.02 //
vendor/dependencies/base/components/regions/helpers/responsive/tools/}my ideal css architecture
Make aUI Library.03 //
oocss.org
ux.mailchimp.com/patterns
Create pages
Create systems
bradfrostweb.com/blog/post/atomic-web-design
01 // Base HTML elements02 // Modular components03 // Page regions04 // Layout system
Show the objectwith all of itsassociated states.
developer.android.com/design
developer.android.com/design/building-blocks/seek-bars
Show the code youwant people to use,not the nal output.
Add development toolsfor rapid developmentand testing.04 //
starbucks.com/static/reference/styleguide
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Try a responsivesandbox duringdevelopment.
Keep documentationcurrent & useful.05 //
jacobrask.github.io/styledocco
2013 // Living Style Guide with Sass + ERB & YAML
sass-lang.com
sass-lang.com/styleguide
github.com/mattkersley/Responsive-Design-Testing
sass-lang.com/styleguide/responsive-test
We open sourced thewebsite. Anyone cancontribute to design.
What if a new colorgets added?THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.
Can the CSS & Style Guide bothshare the same attributes inone single con guration?
Single Source of Truth
Don’t Repeat Yourself
colors:- name: hopbushhex: "c69"- name: bouquethex: "b37399"- name: venushex: "998099"- name: patinahex: "699"- name: nebulahex: "d2e1dd"- name: whitehex: "fff"<% data.color.colors.each do |swatch| %>$<%= swatch.name %>: #<%= swatch.hex %>;<% end %>data/color.yml _color.scss.erb
colors:- name: hopbushhex: "c69"- name: bouquethex: "b37399"- name: venushex: "998099"- name: patinahex: "699"- name: nebulahex: "d2e1dd"- name: whitehex: "fff"%ul.swatches- for swatch in data.color.colors%li{class: "swatch-" + swatch.name}%pre%code= "$" + swatch.name%br/= "#" + swatch.hexdata/color.yml _color.haml
Sass Color Style Guide
2014 // Living Style Guide & Prototype with Sass & Angular as Spec+ Living Variables System for All Devices & Platforms
sfdc-styleguide.herokuapp.com
PrototypesAura (our web framework)Native iOSNative AndroidNative Windows
How do we keepour colors, spacing,& sizes consistent?
TheoBY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!
Theo: theme tokenizerwith JSON inputSassStylusLESSAuraplistXML{
@SalesforceUX
dribbble.com/salesforce
@TeamSassDesign
dribbble.com/TeamSassDesign
themixinsf.com
susy.oddbird.net
artinmycoffee.com
— GUSTAVE FLAUBERT“Be regular and orderly in yourlife so that you may be violentand original in your work.”
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