Atomic Design with WordPress

Learn how to apply atomic design principles when building WordPress themes. If it's good enough for NASA, its probably good enough for you.

Transcript

1. ATOMIC DESIGN
 WITH WORDPRESS Joe McGill WordCamp St. Louis • March 14, 2015
3. THE WEB IS MADE OF THIS STUFF • Content • HTML mark up for semantics • CSS to provide style • JavaScript for interactions
4. OLD PROCESS • Gather or create content • Identify and design template layouts • Write the code to turn comps into 
 web pages • Repeat
5. Benefits of Modular Design http://ntrs.nasa.gov/
6. 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
7. Each part is self contained, focussed on discrete tasks, 
 and fit to a standard set 
 of specs.
8. ATOMIC DESIGN Brad Frost
 http://bradfrost.com/blog/post/atomic-web-design/
9. ATOMIC DESIGN • Atoms: HTML elements + foundation • Molecules: Small components • Organisms: components assembled into modules • Templates: Layouts from organisms • Pages: Templates with real content
10. By breaking the site down into components, we can focus on the idiosyncrasies of each part in isolation.
11. ATOMS • Grid • Typography • Color • Icons • Images
 • HTML elements • Buttons • Labels • Inputs • Animations
12. Atoms to Molecules <img> <p> <h2> <span> Article Teaser
13. Molecules to Organisms
15. BUILDING WORDPRESS READY COMPONENTS Template tags & parts
16. TEMPLATE TAGS Simplify the output of common HTML <nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Posts navigation</h2> <div class="nav-links"><a class="prev page-numbers" href="http://website.com/page/3/">Previous</a> <a class="page-numbers" href="http://example.com/">1</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="http://example.com/page/3/">3</a> <span class="page-numbers current">4</span> <a class="page-numbers" href="http://example.com/page/5/">5</a> <a class="page-numbers" href="http://example.com/page/6/">6</a> <a class="next page-numbers" href="http://example.com/page/5/">Next</a> </div> </nav> Example: Posts pagination navigation HTML
17. // 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
18. TEMPLATE PART
19. TEMPLATE PART EXAMPLE (HTML) <div class="article-card"> <?php the_post_thumbnail( "medium" ) ?> <h2 class="article-title"> <?php the_title(); ?> </h2> <div class="article-excerpt"> <?php the_excerpt(); ?> </div> </div>
20. 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; }
21. COMPONENT EXAMPLE (SASS) .article-card { padding: 10px; margin-bottom: 1.5em; .article-title { … } .article-excerpt { … } @media (min-width: 30em) { float: left; max-width: 30%; } }
22. TEMPLATE PARTS <?php get_template_part( $slug, $name ); ?> <?php include( locate_template('your-template-name.php') ); ?> Load a template part Load a template part within function scope
23. COMPONENT EXAMPLE <?php get_header(); <div class="content-area"> /* start loop */ <?php get_template_part( 'content', $type ); ?> /* end loop */ </div> get_sidebar(); get_footer(); ?>
24. FRONT END STYLE GUIDES • Styleguides.io (styleguides.io) • Pattern Lab (patternlab.io) • Pears WP Theme (pea.rs)
25. PATTERN LAB
26. 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.