Upgrade to Pro — share decks privately, control downloads, hide ads and more …

In Search of the Single Source of Truth

67bb0a8cd6c1993dba0bfe302852f729?s=47 jina
May 29, 2014

In Search of the Single Source of Truth

Talk given at DevConFu.

67bb0a8cd6c1993dba0bfe302852f729?s=128

jina

May 29, 2014
Tweet

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

  13. None
  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