Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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.