Slide 1

Slide 1 text

Building design systems at GitHub Diana Mounter @broccolini

Slide 2

Slide 2 text

Style guide status: End of 2015

Slide 3

Slide 3 text

primercss.io Primer modules

Slide 4

Slide 4 text

primercss.io github.com GitHub app Primer modules

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

More CSS Primer modules Problems No docs }

Slide 7

Slide 7 text

Problems • Piles and piles of CSS that does the same thing • Inconsistent styles • Inconsistent naming conventions

Slide 8

Slide 8 text

This made our CSS: • Hard to maintain • Hard to de-bug • Hard to design & prototype with

Slide 9

Slide 9 text

Which led to: • Bugs in production • Lengthy design-to-development times • Inconsistencies in the user experience

Slide 10

Slide 10 text

A grassroots design systems team

Slide 11

Slide 11 text

Core Maintainers Contributors

Slide 12

Slide 12 text

Quick wins, big impact

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Custom CSS Re-usable CSS Custom CSS Custom CSS Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS Re-usable CSS

Slide 16

Slide 16 text

Started to build systems

Slide 17

Slide 17 text

16 breaks down 8 8 4 4 4 4 2 2 2 2 2 2 2 2 Spacing scale

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Then we ruined everyone’s lives

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Typography scale Type scales based on powers of two often end up in more sensible numbers.

Slide 23

Slide 23 text

Typography scale

Slide 24

Slide 24 text

17.5

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Clear and consistent naming convention

Slide 27

Slide 27 text

Adam Morse CSS and Scalability "If I’m reading html, I want to know what the css is going to do.”

Slide 28

Slide 28 text

Saved!

Slide 29

Slide 29 text

.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

Slide 30

Slide 30 text

What’s important for your naming convention? • Searchablity • Clarity • Scannability • Intention

Slide 31

Slide 31 text

Documentation

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

All the CSS and all the docs in one place

Slide 36

Slide 36 text

Style guide github.com GitHub app Custom CSS Primer modules

Slide 37

Slide 37 text

Primer is our CSS framework

Slide 38

Slide 38 text

Primer is our CSS framework The style guide is documentation on how to use Primer

Slide 39

Slide 39 text

Principles

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

When you actually see the code.

Slide 42

Slide 42 text

Lots of arguments vibrant discussions

Slide 43

Slide 43 text

Principle led development!

Slide 44

Slide 44 text

Write down your principles!

Slide 45

Slide 45 text

Sometimes it can feel like Sisyphean task

Slide 46

Slide 46 text

Break it down

Slide 47

Slide 47 text

THE AWESOME COMPONE NT Show and tell

Slide 48

Slide 48 text

Communication

Slide 49

Slide 49 text

58 comments

Slide 50

Slide 50 text

Explain the why 
 behind the what

Slide 51

Slide 51 text

Communicate to more people more often

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Make changes and status clear & obvious

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Seek feedback

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Respond in a timely manner, and

Slide 62

Slide 62 text

Respond in a timely manner, and don’t wait for them to call you

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

What next?

Slide 69

Slide 69 text

Audit components

Slide 70

Slide 70 text

Make it public DRAFT

Slide 71

Slide 71 text

Hopes for the future…

Slide 72

Slide 72 text

Style guide driven design

Slide 73

Slide 73 text

Where does design happen?

Slide 74

Slide 74 text

“Design decisions run all the way through a product, like mould in a good cheese” Cenny D What design sprints are good for

Slide 75

Slide 75 text

Figma Sketch Pen & paper Prototyping in code Production implementation Photoshop Usability testing Where does design happen? Prototyping in InVision

Slide 76

Slide 76 text

How can design systems be in all those places?

Slide 77

Slide 77 text

Thank you.