Tim Wright, @csskarmaRevolve Conference 2016
Building an Atomic
Design System
Content Design Layout

Tim Wright, @csskarmaRevolve Conference 2016
The CMS

Tim Wright, @csskarmaRevolve Conference 2016
The CMS
Client: Can you update my photo on the website?
Developer: Sure, let me know if there’s anything
else you need!
Client: EMERGENCY! There’s a typo on the home page.
Developer: Fixed!
Client: Can you add our phone number to the contact
page?
Developer: …yeah, sure
December 24, 1992

Tim Wright, @csskarmaRevolve Conference 2016
The CMS
Client: We hired someone, can you add them to the
about page?
Developer: …uh huh
Client: That person got fired, can you take them down
ASAP?!
Developer: Good news! I built you a CMS, so you can make
these all these changes yourself!

Tim Wright, @csskarmaRevolve Conference 2016
– Sun Tzu, The Art of War
“There are [only a few] musical notes,
yet the combinations of these […] give
rise to more melodies than can ever
be heard.”

Tim Wright, @csskarmaRevolve Conference 2016
Style Guide

Tim Wright, @csskarmaRevolve Conference 2016
BUTTON
Text Input
Checkbox Radio Button
Select Menu
Textarea
Style Guide

Tim Wright, @csskarmaRevolve Conference 2016
SIGN IN
Password
Username
Remember Me
Sign In

Tim Wright, @csskarmaRevolve Conference 2016
SEARCH
Search
Search

Tim Wright, @csskarmaRevolve Conference 2016
Checkout
CHECKOUT
Name
I have read the privacy policy
State
Street Address
Zip Code
Credit Card Number

Tim Wright, @csskarmaRevolve Conference 2016
BUTTON
Text Input
Checkbox Radio Button
Select Menu
Textarea
Style Guide

Tim Wright, @csskarmaRevolve Conference 2016
The Design System

Tim Wright, @csskarmaRevolve Conference 2016
– Peter Drucker, Managing Oneself
“It takes far more energy and work to
improve from incompetence to
mediocrity than it takes to improve from
first-rate performance to excellence.”

Tim Wright, @csskarmaRevolve Conference 2016
Content Design Layout
System Patterns

Tim Wright, @csskarmaRevolve Conference 2016
Content Patterns

Tim Wright, @csskarmaRevolve Conference 2016
Content Patterns
Events
URL:
http://dogs-with-beards.com
Title:
Bearded Dogs
Description:
If your dog has a beard, this
event is for you!
Image(s):

Tim Wright, @csskarmaRevolve Conference 2016
Content Patterns
Article
URL:
http://this-article.com
Title:
Amazing Article about Dogs
Author(s):
Bobby Orr
Publish Date:
Oct. 1, 2016
Content:
Lorem Ipsum…

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Narrow Card
Lorem ipsum dolor sit
amet
Morbi sagittis mauris posuere fel
ornare, porttitor euismod augue
eleifend.
LABEL
Dogs with Beards
If your dog has a beard, this
event is for you!
EVENT

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Wide Card
Lorem ipsum dolor sit amet
Morbi sagittis mauris posuere fel ornare,
porttitor euismod augue eleifend.
LABEL

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Wide Card
Dogs with Beards
If your dog has a beard, this
event is for you!
EVENT

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Wide Card, no image
Dogs with Beards
If your dog has a beard, this
event is for you!
EVENT

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Call to action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend hendrerit
neque id tempor. Curabitur placerat commodo erat sit amet volutpat.
CTA Button
Lorem ipsum dolor sit amet

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Call to action
Come out to the park with your bearded dog for some fun in the sun. If you’re
dog doesn’t have a beard already there will be a shaving station.
Don’t Miss the Bearded Dog Event

Tim Wright, @csskarmaRevolve Conference 2016
Design Patterns
Call to action
We have the best newsletter, it’s great… it’s the best newsletter of all time. You’ll
love every email we send you. It’s the best.
Sign Up
Sign Up for Our Newsletter

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns

Tim Wright, @csskarmaRevolve Conference 2016
Hero
Navigation
Feature
One
Feature
Two
Feature
Three
Call to action
Footer

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns
The Master Template
Content Zone A
Content Zone C
Content Zone D
Master Template
Content Zone B

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns
Content Zone B
Purpose
Rules
Layout Style
Technical Dependencies
Voice & Tone

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns
Module Modifications
Lorem ipsum dolor sit
amet
Morbi sagittis mauris posuere fel
ornare, porttitor euismod augue
eleifend.
CATEGORY
Lorem ipsum dolor sit
amet
Morbi sagittis mauris posuere fel
ornare, porttitor euismod augue
eleifend.
CATEGORY

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns
Template Modifications

Tim Wright, @csskarmaRevolve Conference 2016
Layout Patterns
Template Modifications

Tim Wright, @csskarmaRevolve Conference 2016

Tim Wright, @csskarmaRevolve Conference 2016

Tim Wright, @csskarmaRevolve Conference 2016
Designer
Editor
CMS
System Patterns
“I need a button”“Here’s a button”
“The button should say, “Learn
more about dogs.””

Tim Wright, @csskarmaRevolve Conference 2016
LEARN MORE ABOUT DOGS

Tim Wright, @csskarmaRevolve Conference 2016
– Elon Musk, Miscellaneous rant, 2016
“We realized that the true problem, the
true difficulty, and where the greatest
potential is – is building the machine
that makes the machine.”

Tim Wright, @csskarmaRevolve Conference 2016
Thank you for
listening
…and I’ll try and do better next time.