Atomic Design with WordPress

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.

7cef1c9108207ec24db7a40f142db676?s=128

Joe McGill

March 14, 2015
Tweet

Transcript

  1. 2.
  2. 3.

    THE WEB IS MADE OF THIS STUFF • Content •

    HTML mark up for semantics • CSS to provide style • JavaScript for interactions
  3. 4.

    OLD PROCESS • Gather or create content • Identify and

    design template layouts • Write the code to turn comps into 
 web pages • Repeat
  4. 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
  5. 7.

    Each part is self contained, focussed on discrete tasks, 


    and fit to a standard set 
 of specs.
  6. 9.

    ATOMIC DESIGN • Atoms: HTML elements + foundation • Molecules:

    Small components • Organisms: components assembled into modules • Templates: Layouts from organisms • Pages: Templates with real content
  7. 10.

    By breaking the site down into components, we can focus

    on the idiosyncrasies of each part in isolation.
  8. 11.

    ATOMS • Grid • Typography • Color • Icons •

    Images
 • HTML elements • Buttons • Labels • Inputs • Animations
  9. 14.
  10. 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
  11. 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
  12. 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>
  13. 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; }
  14. 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%; } }
  15. 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
  16. 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(); ?>
  17. 24.
  18. 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.