Legos for Developers

A modular approach to WordPress Development

Outline

What is Modularity

Why change your approach to Modular

Modular process from wireframe to live website

Moving from page templates to reuseable modules

Get started today

Gutenberg and Atomic design

THE PATTERN LANGUAGE

253 patterns for towns, buildings, and construction

offices, workshops, and public buildings

  • 146. FLEXIBLE OFFICE SPACE
  • 147. COMMUNAL EATING
  • 148. SMALL WORK GROUPS
  • 149. RECEPTION WELCOMES YOU
  • I50. A PLACE TO WAIT

What is Atomic Design

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: Atoms. Molecules. Organisms. Templates. Pages. – Brad Frost

 

Atoms

molecules

organisms

What is Modular Design?

-Modular web design is comprised of two types of patterns   Content Patterns and Display Patterns

Content Patterns

 “a solution to a recurring design problem, such that you could use the solution many times and never use it in the same way twice.”

-Nathan Curtis

Display pattern

Display pattern describes a specific rendering and can be applied to multiple types of Content patterns.

Content Pattern

Display Pattern

Advantages of using Modular Design Methodology

Dry Code

More collaborative and iterative process

Empower admins and content editors

Dry - Don't Repeat Yourself

WaterFall is Broken

More collaborative and iterative process

Agile With Atomic Design

Empower admins and content editors

Modular Design Process

Identify Patterns

Categorize Patterns

Identify patterns

Categorize patterns

Content Pattern – ACF Field

Design Pattern – SCSS

Organize you SCSS

Atoms –  Color, Typography, Iconography

Molecules – Theme styles,layout, utils

Organisms – A SCSS file for each template-part

Template Parts

Get Template Part

 
  <?php get_template_part('templates/module', 'page'); ?>

Module-page.php


<?php 

  // Check if ACF is enabled and the modules field exists
  if( have_rows('modules') ) {
    if (function_exists('get_field') get_field('modules') !== null) { 

     the_modules_loop(); 

   } else { 

     the_module('post'); 

   } 
}

The module loop


function the_modules_loop($modules_field = 'modules'){

  //Loop through rows of flexible content field
  while (the_flexible_field($modules_field)) {

    // Render module template based on the row layout's name
    $module_name = str_replace('_', '-', get_row_layout());
      
    //pass location of the template part
    the_module($module_name);
  }
}

Render each module


// Render a module from the "modules" directory
function the_module($module_name = '') {
  if(empty($module_name)) {
    return false;
  }
  
  locate_template( "templates/modules/".$module_name.".php", true, false );

}

Get started today


  git clone https://github.com/jgdzine/modular-sage-theme.git

ACF Flexible Content Demo

Gutenberg Demo

Resources

Modular Development

ACF Content Modular WordPress Themes: https://selfteach.me/acf-flexible-content-modular-wordpress-themes/

Modular Layout Builder: https://torquemag.io/2014/10/conductor-modular-layout-builder-wordpress/

Theme

ScottPolhemus/modular Theme: https://github.com/ScottPolhemus/modular

Books

Modular Web Design: Creating Reusable Components for User Experience Design and Documentation:https://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351

Atomic Designhttp://bradfrost.com/blog/post/atomic-web-design/

Gutenberg Resources

Github Repos

Gutenberg Handbook: https://wordpress.org/gutenberg/handbook/

Ahmad Awais Create Guten Block: https://github.com/ahmadawais/create-guten-block

Talks

Design Patterns: https://wordpress.tv/2018/07/08/tammie-lister-anatomy-of-a-block-gutenberg-design-patterns/

Questions?

Thank You