Presented at FITC Toronto 2017
by Mina Markham, Slack
Details at http://fitc.ca/presentation/styling-hillary/
Overview
A comprehensive design system is a critical tool for maintaining a consistent UI during rapid development that spans multiple codebases.
During the 2016 U.S. Election, Mina spent most of her time building and refining Pantsuit, the design system that powered many of the applications hosted on hillaryclinton.com.
In this talk, Mina will share successes and failures from nearly two years at Hillary for America, including creating CSS architecture and implementing a redesign of the main website.
Objective
To learn how to translate static comps into a modular design system.
Target Audience
Developers and designers interested modular CSS and pattern libraries.
Five Things Audience Members Will Learn
Identifying and extracting UI components
The importance of consuming your own products
Documentation is everything
Sometimes done is better than perfect
Naming things is important
10. % Broke the homepage of hillaryclinton.com
& Launched a site for oppositional content
❤ Built design system used by dozens of apps
( Created a dashboard for caucus data
♿ Led effort for accessibility compliance
* Implemented redesign of hillaryclinton.com
+ Helped build a custom CMS for new site
, Ran tech talk series
- Had the time of my life
11. % Broke the homepage of hillaryclinton.com
& Launched a site for oppositional content
❤ Built design system used by dozens of apps
( Created a dashboard for caucus data
♿ Led effort for accessibility compliance
* Implemented redesign of hillaryclinton.com
+ Helped build a custom CMS for new site
, Ran tech talk series
- Had the time of my life
77. The documentation for Pantsuit is a great
example of form following function: it
served as a source of inspiration as well as a
how-to.
BETH ANDRES-BECK, Senior Engineer, Fundraising
“
83. PANTSUIT
• Backend Teams
• Internal dashboards
• Documentation
• Most common
• Front-end boilerplate
• Donations
CDN NPM MANUAL
npm publishgit push download
v2.1.0
84. “Pantsuit made it so we could deploy style
changes to our 100+ microsites
instantaneously and cache styles across all
sites easily and consistently.
Nat Welch, SRE, Dev Ops
87. Pantsuit turned our tech products into a
couture collection – each app individually
crafted with unifying motifs that tied them
together. It was hands down the best tool
we had at our disposal on the campaign ❤.
KYLE LUCOVSKY, Engineer, Voter Team
“
138. Resources + Credits
9 Emoji provided free by Emoji One
: Campaign photos by Barbara Kinney
and Samuel Fisch
; Fonts: Niveau Grotesk, PT Mono &
EloquentJFPro, provided byTypekit
< Sharp Unity by Sharp Type
= Washington Wasteland image from Fallout 3