Slide 1
Slide 1 text
ATOMIC DESIGN
WITH WORDPRESS
Joe McGill
WordCamp St. Louis • March 14, 2015
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
THE WEB IS MADE OF
THIS STUFF
• Content
• HTML mark up for semantics
• CSS to provide style
• JavaScript for interactions
Slide 4
Slide 4 text
OLD PROCESS
• Gather or create content
• Identify and design template layouts
• Write the code to turn comps into
web pages
• Repeat
Slide 5
Slide 5 text
Benefits of Modular Design
http://ntrs.nasa.gov/
Slide 6
Slide 6 text
THE BENEFITS OF DESIGNING
MODULAR SYSTEMS
• Standardization: reduces complexity
• Versatility: get to MVP faster, add
capabilities as needed
• Maintainability: extend the life of a
product, increase reliability
Slide 7
Slide 7 text
Each part is self contained,
focussed on discrete tasks,
and fit to a standard set
of specs.
Slide 8
Slide 8 text
ATOMIC DESIGN
Brad Frost
http://bradfrost.com/blog/post/atomic-web-design/
Slide 9
Slide 9 text
ATOMIC DESIGN
• Atoms: HTML elements + foundation
• Molecules: Small components
• Organisms: components assembled
into modules
• Templates: Layouts from organisms
• Pages: Templates with real content
Slide 10
Slide 10 text
By breaking the site down into
components, we can focus on
the idiosyncrasies of each part
in isolation.
Slide 11
Slide 11 text
ATOMS
• Grid
• Typography
• Color
• Icons
• Images
• HTML elements
• Buttons
• Labels
• Inputs
• Animations
Slide 12
Slide 12 text
Atoms to Molecules
![]()
Article Teaser
Slide 13
Slide 13 text
Molecules to Organisms
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
BUILDING WORDPRESS
READY COMPONENTS
Template tags & parts
Slide 17
Slide 17 text
// prints next/prev links
the_posts_pagination();
// returns next/prev links
get_the_posts_pagination();
Example: new template tags introduced in WP 4.1
TEMPLATE TAGS
Simplify the output of common HTML
Slide 18
Slide 18 text
TEMPLATE PART
Slide 19
Slide 19 text
TEMPLATE PART EXAMPLE
(HTML)
Slide 20
Slide 20 text
COMPONENT EXAMPLE
(CSS)
.article-card {
padding: 10px;
margin-bottom: 1.5em;
}
.article-title {
font: bold 1.25em/1.1 adobe-caslon-pro;
margin-bottom: .5em;
}
.article-excerpt {
font-size: .875em;
}
Slide 21
Slide 21 text
COMPONENT EXAMPLE
(SASS)
.article-card {
padding: 10px;
margin-bottom: 1.5em;
.article-title { … }
.article-excerpt { … }
@media (min-width: 30em) {
float: left;
max-width: 30%;
}
}
Slide 22
Slide 22 text
TEMPLATE PARTS
Load a template part
Load a template part within function scope
Slide 23
Slide 23 text
COMPONENT EXAMPLE
/* start loop */
/* end loop */
get_sidebar();
get_footer();
?>
Slide 24
Slide 24 text
FRONT END STYLE GUIDES
• Styleguides.io (styleguides.io)
• Pattern Lab (patternlab.io)
• Pears WP Theme (pea.rs)
Slide 25
Slide 25 text
PATTERN LAB
Slide 26
Slide 26 text
CHRIS COYIER’S TOP TIPS
FOR STYLE GUIDES™
• Make it just one big long page available
online so your whole team can reference it.
• Use the same HTML/CSS/JS that the
production site uses.
• Break up resources by pattern. (HTML/CSS/JS)
• Bundle/minify patterns for production.
• Base all patterns on real needs.