Creating reusable Atomic Elements using WordPress and the Lean Theme
Frontend
By Francisco Giraldo
Increase the productivity of your app development phase by creating highly reusable front-end components using atomic elements.
INTRODUCTION
This is a continuation of our previous post Understanding Atomic Design Approach where we learned what is the Atomic Design methodology. In this article we will focus on the practical side of the development phase.
Developers know very well the advantages of using a modular approach for coding their websites and apps. Some of those advantages are:
- Code reusability
- Smaller development time on the long run
- Smaller source code (JS and CSS)
- Better structured code
- Code easier to maintain
Creating modules is an easy task but creating highly reusable modules is not that easy, it requires a prior analysis of the design where abstraction thinking and a good eye for details are required. But once you get to know and practice the techniques it will become easy and a lot more fun to develop the product.
In the following lines we will review some of the techniques that I have applied successfully in my latest WordPress projects using the Lean Theme.
THE LEAN THEME
The Lean Theme is a starter theme for WordPress created by Nolte which is focused for developing components using the Atomic Design methodology.
It is also designed as an MVC framework where you will add all the app logic and models in classes separated from the views ( which are atomic elements ).
Also is equipped with excellent tools and helper functions to produce high quality code using high tech development practices. You can learn more about the Lean Theme here:
One of the helper functions that we will take advantage of is the Template Loader function, which will enable us to load the different Atomic elements easily.
You can read more about it here:
Example 1:
Using the Load function to load the grid molecule.
Example 2:
Passing arguments to the Elements:
Example 3:
Using the Load function to load an Atom, Molecule, Organism and Template (with no arguments).
PRESENTATIONAL ATOMIC ELEMENTS
Let’s first review how to create some atomic elements.
One of the most important techniques for creating highly reusable components (or atomic elements) is to create the element as an independent view separated from the app logic or data.
Example 1:
Basic skeleton of an Atomic element.
A Title element created as an Atom:
Instantiation of the Atomic element.
The Atom is instanced from a molecule, organism, or template:
Example 2:
A Grid organism that contains child molecules:
The Grid organism is instanced from a Template element where the data is fetched and passed:
$recent_posts is collection of items in which each item has the data format (as an array) require by the inner molecules:
Posts Model/Controller Class:
All Atomic elements should be presentational only and offer the flexibility to adjust to any design case.
It’s also important to create the Atomic element as generic as possible instead of tiding the element to the content.
Example:
Products Grid => Grid
Agents Grid => Grid
IDENTIFYING ALL ATOMIC ELEMENTS
Before starting the frontend work, we must first analyse the design and identify all the repeated design elements or patterns.
Then this patterns should be grouped in generic and flexible Atomic elements.
This is very important because later in the middle of the project it will be difficult to modify an atomic element that is reused in many sections of the app.
NESTING DYNAMIC ATOMIC ELEMENTS
In the previous examples we saw how a parent element can have multiple child elements.
Another good technique for creating highly reusable components is to create a Parent Element that contains dynamic child components. That is, for example a Grid organism in which their grid items can be any molecule.
This technique was inspired by the Layout Pattern from React.
Example 1:
A Hero organism with a dynamic inner content molecule.
A Hero organism with an inner molecule:
The same Hero organism with a different inner molecule:
Example 2:
Grid Section Organism which contains a Header molecule and a Grid molecule.
Another Grid Section Organism which contains a Header molecule, a Grid molecule and an extra Button atom. Should we use the same Grid Section Organism?
And now the code magic trick:
Instancing the organism with an inner molecule:
ATOMIC ELEMENT VARIATIONS
An Atomic Element can have multiple variations, specially the Atoms and molecules.
Example:
The Button atom
PRO TIP: if the variation is specific to a template then you can simply add the CSS rules directly in the template SASS file.
PRO TIP 2: the spacings specific variations can also be added as CSS rules directly in the template SASS file.
STYLE/JS STANDALONE ATOMIC ELEMENTS
Another good technique but less used is to create an atomic element as only a CSS Class or a JS function. This is useful when you need to apply a simple design pattern easily throughout the whole design.
Example:
The Link atom:
And used it in any place easily:
PRO TIP:
Use a SASS mixin for more flexibility:
CONCLUSION
This techniques may seem too much work, but when you have defined a good base of elements, the rest of the development will be much easier and fun.
Also, this techniques require a lot of attention of details and abstraction to architecture as best as possible all the elements so they can efficiently be reusable. So be sure to spend good time at the beginning of the project before jumping to the code.
Have fun developing…