Styling Hillary

Trying (and failing) to save the Republic with CSS a.k.a.

The longest 18 months of my life OMG! a.k.a.

⚠ ️

CAUTION MAY CONTAIN POLITICS

mina.codes @ minamarkham Hi, I’m Mina $

mina.so/pantsuit-post

An 18-month , nationally televised hackathon

% 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

% 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

[ insert email joke here ]

June 2015

Election Day

We need a Bootstrap … “ Kyle Rush, Deputy CTO

Design System? Pattern Library? Styleguide?

Naming things is hard.

Pattern Library:

Library of UI patterns

Framework:
The front-end code

Style Guide:
The documentation

Design System: All of the above (and more)

mina.so/ds-anatomy

…and it needs a good name . “ Kyle Rush, Deputy CTO

Pantsuit?

Why did we need it?

hillaryclinton.com

hillaryclinton.com/donate

hillaryclinton.com/calls

hillaryclinton.com/literallytrump

hillaryclinton.com/briefing

Multiple codebases. One UI.

Partners

Visual Design . Product Design Stakeholders

Content / Storytelling / Fundraising 0 Organizing ✅ Voter 2 Engagement 3 ️ Data Infrastructure ( Analytics Support

4 ️ Front-End Ops 5 Dev Ops

Te a m : 6

Done is better than perfect .

If we don’t ship on time , the ship will have sailed. Stephanie Hannon, CTO “

Pantsuit 1.0 ≈ 6 weeks

Te c h n i c a l d e b t i s
your “ friend ”

As time progressed, maintainability went down and stability went up. Ve r y O f f i c i a l C h a r t ™ Ve r y O f f i c i a l C h a r t ™

If you don’t have technical debt , you’re not moving fast enough.

How did you do it?

(Re)Define Implement Iterate Test

Define

BUTTONS INPUTS DROPDOWNS CARDS HIGHLIGHTS HEADLINES PULLQUOTES

Implement

Dogfooding

Do it live!

Framework Product UI Kit

Te s t

& Iterate

How did you do it by yourself ?

Collaboration

Pantsuit Council

5 4 ️ ✅ / 0 2 + ⭐ 8 8 9 8 8 8 6 8 8 8 9 8 8

Documentation

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 “

Automation

❤ ️

post-publish.js

PANTSUIT • Backend Teams • Internal dashboards • Documentation • Most common • Front-end boilerplate • Donations CDN NPM MANUAL npm publish git push download v2.1.0

“ 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

What was the outcome?

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 “ “

Source: https://twitter.com/MinaMarkham/status/806244330826592256

Source: https://www.reddit.com/r/The_Donald/comments/53quh5/meet_mina_markham_the_designer_of_hillarys_ui/

WASTELAND REDDIT IS A

Source: https://twitter.com/MinaMarkham/status/805934566695464960

Source: https://twitter.com/uzumaki42/status/806215721252507649

WASTELAND REDDIT TWITTER IS A

WASTELAND REDDIT TWITTER IS A FACEBOOK

WASTELAND REDDIT TWITTER IS A FACEBOOK THE INTERNET

Source: https://twitter.com/lizzaretsky/status/855042702278307840

Source: https://twitter.com/MinaMarkham/status/855452958393114624

Source: https://twitter.com/stephantaylor/status/741151893460819968

Source: https://twitter.com/MinaMarkham/status/741291821884661760

fakenews

Open Source

Was it worth it ?

: Landon Nordeman/TIME

: Barbara Kinney/Hillary for America

: Samuel Fisch/Hillary for America

: Barbara Kinney/Hillary for America

: Sara Kerens

: Samuel Fisch/Hillary for America

: Barbara Kinney/Hillary for America

Thank you

mina.codes @ minamarkham

Resources + Credits

; Emoji provided free by Emoji One

< Campaign photos by Barbara Kinney
and Samuel Fisch

️ Fonts: Niveau Grotesk, PT Mono &
EloquentJFPro, provided by Typekit

️ Washington Wasteland image from Fallout 3 ? ️ Icons by The Noun Project

Styling Hillary