Building design systems at GitHub

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
December 15, 2016

Building design systems at GitHub

A lightning talk for the Design Systems Coalition NYC meetup covering where we started and some of the lessons learned this year.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

December 15, 2016
Tweet

Transcript

  1. Building design systems at GitHub Diana Mounter @broccolini

  2. Style guide status: End of 2015

  3. primercss.io Primer modules

  4. primercss.io github.com GitHub app Primer modules

  5. primercss.io github.com GitHub app More CSS Primer modules

  6. More CSS Primer modules Problems No docs }

  7. Problems • Piles and piles of CSS that does the

    same thing • Inconsistent styles • Inconsistent naming conventions
  8. This made our CSS: • Hard to maintain • Hard

    to de-bug • Hard to design & prototype with
  9. Which led to: • Bugs in production • Lengthy design-to-development

    times • Inconsistencies in the user experience
  10. A grassroots design systems team

  11. Core Maintainers Contributors

  12. Quick wins, big impact

  13. h1 h2 h3 Utilities Single-purpose classes that do one thing

    well.
  14. Custom CSS Re-usable CSS Custom CSS Custom CSS Custom CSS

    Custom CSS Custom CSS Custom CSS Custom CSS Custom CSS Re-usable CSS Re-usable CSS
  15. Custom CSS Re-usable CSS Custom CSS Custom CSS Re-usable CSS

    Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS
  16. Started to build systems

  17. 16 breaks down 8 8 4 4 4 4 2

    2 2 2 2 2 2 2 Spacing scale
  18. 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
  19. Then we ruined everyone’s lives

  20. None
  21. None
  22. Typography scale Type scales based on powers of two often

    end up in more sensible numbers.
  23. Typography scale

  24. 17.5

  25. Brent Jackson http://jxnblk.com/writing/posts/mathematical-web-typography/ Mathematical Web Typography

  26. Clear and consistent naming convention

  27. Adam Morse CSS and Scalability "If I’m reading html, I

    want to know what the css is going to do.”
  28. <div class="alert alert—success"> <h2 class="text-center text-white"> Saved!</h2> </div>

  29. .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
  30. What’s important for your naming convention? • Searchablity • Clarity

    • Scannability • Intention
  31. Documentation

  32. primercss.io github.com GitHub app More CSS Primer modules More CSS

    No docs }
  33. primercss.io github.com GitHub app More CSS Primer modules

  34. A company style guide has different needs to an open-source

    framework
  35. All the CSS and all the docs in one place

  36. Style guide github.com GitHub app Custom CSS Primer modules

  37. Primer is our CSS framework

  38. Primer is our CSS framework The style guide is documentation

    on how to use Primer
  39. Principles

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

  41. When you actually see the code.

  42. Lots of arguments vibrant discussions

  43. Principle led development!

  44. Write down your principles!

  45. Sometimes it can feel like Sisyphean task

  46. Break it down

  47. THE AWESOME COMPONE NT Show and tell

  48. Communication

  49. 58 comments

  50. Explain the why 
 behind the what

  51. Communicate to more people more often

  52. None
  53. Make changes and status clear & obvious

  54. None
  55. None
  56. None
  57. None
  58. Seek feedback

  59. None
  60. None
  61. Respond in a timely manner, and

  62. Respond in a timely manner, and don’t wait for them

    to call you
  63. None
  64. None
  65. None
  66. None
  67. None
  68. What next?

  69. Audit components

  70. Make it public DRAFT

  71. Hopes for the future…

  72. Style guide driven design

  73. Where does design happen?

  74. “Design decisions run all the way through a product, like

    mould in a good cheese” Cenny D What design sprints are good for
  75. Figma Sketch Pen & paper Prototyping in code Production implementation

    Photoshop Usability testing Where does design happen? Prototyping in InVision
  76. How can design systems be in all those places?

  77. Thank you.