In Search of the Single Source of Truth

Talk given at DevConFu.

Transcript

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