A lightning talk for the Design Systems Coalition NYC meetup covering where we started and some of the lessons learned this year.
Building designsystems at GitHubDiana Mounter@broccolini
View Slide
Style guide status:End of 2015
primercss.ioPrimermodules
primercss.io github.comGitHub appPrimermodules
primercss.io github.comGitHub appMore CSSPrimermodules
More CSSPrimermodulesProblemsNo docs}
Problems• Piles and piles of CSS that does the same thing• Inconsistent styles• Inconsistent naming conventions
This made our CSS:• Hard to maintain• Hard to de-bug• Hard to design & prototype with
Which led to:• Bugs in production• Lengthy design-to-development times• Inconsistencies in the user experience
A grassrootsdesign systems team
Core Maintainers Contributors
Quick wins, big impact
h1h2h3UtilitiesSingle-purpose classes that do one thing well.
Custom CSS Re-usable CSSCustom CSSCustom CSSCustom CSSCustom CSSCustom CSSCustom CSSCustom CSSCustom CSSRe-usable CSSRe-usable CSS
Custom CSS Re-usable CSSCustom CSSCustom CSSRe-usable CSSRe-usable CSSRe-usable CSSRe-usable CSSRe-usable CSS
Started to build systems
16 breaks down8 84 44 42 22 22 22 2Spacing scale
16 breaks down, and adds up to wholenumbers more easily.32 3232 3232 3232 3264 6464 64128 12864
Then we ruinedeveryone’s lives
Typography scaleType scales based on powers of two oftenend up in more sensible numbers.
Typography scale
17.5
Brent Jacksonhttp://jxnblk.com/writing/posts/mathematical-web-typography/Mathematical WebTypography
Clear and consistentnaming convention
Adam MorseCSS and Scalability"If I’m reading html, Iwant to know what thecss is going to do.”
Saved!
.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
What’s important for yournaming convention?• Searchablity• Clarity• Scannability• Intention
Documentation
primercss.io github.comGitHub appMore CSSPrimermodulesMore CSS No docs}
A company style guidehas different needs to anopen-source framework
All the CSS and all thedocs in one place
Style guide github.comGitHub appCustomCSSPrimermodules
Primer is our CSS framework
Primer is our CSS frameworkThe style guide is documentationon how to use Primer
Principles
Sure!You’re gonna make it OOCSS/functional/atomic/BEM right?
When you actually see the code.
Lots of argumentsvibrant discussions
Principle led development!
Write down your principles!
Sometimes it can feel likeSisyphean task
Break it down
THEAWESOMECOMPONENTShow and tell
Communication
58 comments
Explain the why behind the what
Communicate to more peoplemore often
Make changes andstatus clear & obvious
Seek feedback
Respond in a timely manner, and
Respond in a timely manner, anddon’t wait for them to call you
What next?
Audit components
Make it publicDRAFT
Hopes for the future…
Style guide driven design
Where does design happen?
“Design decisions run all theway through a product, likemould in a good cheese”Cenny DWhat design sprints are good for
FigmaSketch Pen & paperPrototypingin codeProductionimplementationPhotoshopUsability testingWhere does design happen?Prototypingin InVision
How can design systemsbe in all those places?
Thank you.
broccolini
kamimu
.jpg){kind=avatar}
soposiii
ncdc
terkel
yutaromurakami
yumatsushita
vivion
recruitengineers
dmitry_tolonen
haru860
tsubotax
hiranotomoki
keithpitt
bkeepers
aarron
kneath
mraible
nonsquared
myddelton
pedronauck
edds
eileencodes
geoffreycrofte
jensimmons