Empowering designers to code (2)

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
June 16, 2016

Empowering designers to code (2)

Learning to code is a journey, and the first milestone for designers is often learning HTML and CSS. A great style guide can really propel a designer on their journey to becoming a key contributor. The same attributes that make a style guides great for designing in the browser also help with CSS maintainability, scalability, performance, and can even make it enjoyable to work with CSS again. This talk delves into what makes a great style guide for designers and everyone else, with some tips on the process of building style guides.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

June 16, 2016
Tweet

Transcript

  1. Empowering designers to code Diana Mounter @broccolini

  2. Product Designer & Design Systems Lead GitHub !

  3. Git is not GitHub

  4. Git is a free and open source distributed version control

    system
  5. GitHub is a collaboration platform built on top of Git,

    where you can host and share code
  6. GitHub is a collaboration platform built on top of Git,

    where you can host and share code
  7. Design Systems Goal: to build a robust, composable, and flexible

    system, that works across platforms and context, providing guidance on visual language, voice and tone, and implementation.
  8. …but right now We’re mostly focussed on improving our CSS

    style guide. !
  9. None
  10. “it’s all relative” - @jsavalle

  11. Learning to code is 
 a journey

  12. www

  13. Setup dev environment? Git commit what?! How to push O_o

    Where is all the code? How to run tests? www
  14. HTML & CSS prototypes Contributes to production Contributes to style

    guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance
  15. HTML & CSS prototypes Contributes to production Contributes to style

    guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance
  16. Style guides are a gateway 
 drug for empowering 


    designers to code
  17. Style guides for designers

  18. What makes a style guide good for designers?

  19. What makes a style guide good for designers? 1. Highly

    reusable and flexible styles
  20. What makes a style guide good for designers? 1. Highly

    reusable and flexible styles 2. A clear and consistent naming convention
  21. What makes a style guide good for designers? 1. Highly

    reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation
  22. 1.Highly reusable and flexible styles

  23. 1.Highly reusable and flexible styles Styles that can be mixed

    and matched to achieve many different layouts, independent of their location.
  24. Components Frequently used patterns. ! ! ! x x

  25. ! Layout objects Common layout patterns. The media object Grid

    systems ♥
  26. ! Layout objects Common layout patterns. The media object Grid

    systems ♥
  27. ! Layout objects Common layout patterns. The media object Grid

    systems ♥
  28. Utilities Single-purpose classes that do one thing well. .h1 .h2

    .h3 .h4 .CAPS .strong .regular .underline .no-underline .p-1 .p-2 .p-3 .p-4 .text-gray .text-blue-light .text-blue-dark .text-blue .text-turquoise .text-green .text-yellow .text-orange .text-pink .text-red .mt-1 .mt-2 .mt-3 .mt-4 .mr-1 .mr-2 .mr-3 .mr-4 .py-4 .px-4
  29. https://www.etsy.com

  30. None
  31. https://www.etsy.com/shop/HookAndMatter

  32. None
  33. Open/closed principle Open for extension, closed for modification.

  34. Base component styles only contain styles shared across all variations.

  35. Modifiers add variations on top of those styles, and don’t

    override base styles. ♥
  36. 2.A clear and consistent 
 naming convention

  37. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied
  38. "If I’m reading html, I want to know what the

    css is going to do.” - Adam Morse, CSS and Scalability
  39. <div class="alert alert—success"> <h2 class="text-center text-white"> Saved!</h2> </div>

  40. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied • Follow a consistent pattern
  41. .text-gray-dark .text-gray .text-gray-light .bg-blue-dark .bg-blue .bg-blue-light .btn .btn--small .btn--green-dark .card

    .card--small .card--large
  42. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied • Follow a consistent pattern • Promote reuse of styles
  43. // Do .btn-orange {…} .alert-error {…} // Don’t .homepage-cta-button {…}

    .registration-form-error {…} Use presentational or functional names rather than location-specific
  44. // Do .btn-orange {…} // Presentational .alert-error {…} Use presentational

    or functional names rather than location-specific
  45. // Do .btn-orange {…} .alert-error {…} // Functional Use presentational

    or functional names rather than location-specific
  46. // Do .btn-primary {…} // Functional .alert-red {…} // Presentational

    Use presentational or functional names rather than location-specific
  47. Choose what’s right for your team.

  48. “The most reusable components are those with class names that

    are independent of the content.” - Nicolas Gallagher, About HTML semantics and 
 front-end architecture
  49. 3.Up-to-date & well-written documentation

  50. 3.Up-to-date & well-written documentation • Explain how to use styles

    with production code examples
  51. • Name • Description • Example • Code snippet

  52. None
  53. CSS Style guide documentation Production website

  54. 3.Up-to-date & well-written documentation • Explain how to use styles

    with production code examples • Keep documentation regularly updated
  55. Show the status of styles, such as: experimental, stable, or

    deprecated Examples from: Salesforce Lightning Design System
  56. • Use routine events as a reminder to make updates

  57. • Use routine events as a reminder to make updates

    • Make it part of your code review checklist
  58. • Use routine events as a reminder to make updates

    • Make it part of your code review checklist • Make it easy for everyone to contribute
  59. None
  60. None
  61. CSS Style guide documentation Production website Markdown docs GitHub.com repo

  62. None
  63. 3.Up-to-date & well-written documentation • Explain how to use styles

    with production code examples • Keep documentation regularly updated • Include principles and coding guidelines that explain the CSS behind the styles
  64. Teach people the what, the how and the why, so

    they’ll become champions of your style guide.
  65. Most importantly… A style guide should rarely require you to

    write new CSS.
  66. Designing in the browser can be productive and fun!

  67. Designers need a safe way to practice with production code.

  68. Prototyping tools

  69. Prototyping tools ✓ pulls in the style guide

  70. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype
  71. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git
  72. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS
  73. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS ✓ includes a simple templating language
  74. HTML & CSS prototypes

  75. Contributes to production Contributes to style guide Builds tools for

    others Fixes CSS bugs Refactors front-end code Improves performance HTML & CSS prototypes
  76. The issues with CSS that affect designers are often problems

    for everyone else too.
  77. What makes a style guide good for designers everyone? 1.

    Highly reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation
  78. Building style guides

  79. 1. Write down your principles

  80. Sure! You’re gonna make it OOCSS/ functional/atomic/BEM right?

  81. When you actually see the code.

  82. Lots of arguments vibrant discussions

  83. Principle led development!

  84. 2. Design for systems

  85. None
  86. None
  87. Spacing scales Use highly composable numbers, such as 16 or

    12. Not 10.
  88. 16 breaks down 8 8 4 4 4 4 2

    2 2 2 2 2 2 2
  89. 16 breaks down, and adds up to whole numbers more

    easily. 32 32 32 32 32 32 32 32 64 64 64 64 128 128 64
  90. Type scales Type scales based on powers of two often

    end up in more sensible numbers.
  91. - Brent Jackson, Mathematical Web Typography Type scales based on

    powers of two often end up in more sensible numbers.
  92. 3. Evaluate decisions based on user needs

  93. What’s important for your naming convention? • Searchablity • Clarity

    • Scannability • Intention
  94. Treat your style guide like a product.

  95. Style guides are design tools for the web.

  96. • Reduce barriers

  97. • Reduce barriers • Improve workflows

  98. • Reduce barriers • Improve workflows • Build a better

    user experience
  99. • Reduce barriers • Improve workflows • Build a better

    user experience • Empower designers to code
  100. None
  101. Diana Mounter @broccolini Thank you.