How to implement Atomic Design in Bricks?

Do you know what it’s Atomic Design? It’s a way to order your design, propusal from Brad Frost, inspired on the chemistry.

On this tutorial we will get an approach of how we could implement this Atomic Design on Bricks Builder, with some difference.

What it’s Atomic Design?

Atomic design it’s a methodology to implement a design system on your website designs.

Like I said before, it’s inspired on chemistry, and have five levels.

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

You can read more here, in the origina post from the author: Atomic Design Chapter 2

Atoms

Refer a atoms from chemicals, and it’s the part more little of a design. For example, an input of a for, a simple button, a heading, links, images. And this “Atoms” can’t be break.

If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

Brad Frost

Do you need a extra hand in your development business?

If you’re freelancer or Marketing Agency and need extra hand to work with Bricks Builder development, with the good practices, you can contact with me and me team on outwp.com , we are a White Label development agency focused on WordPress and the new builders.

Mainly Bricks builder, but also we work with Oxygen Builder.

Molecules

Molecules are Atoms toghether. For example, some links toghether could be a nav primary on the header:

The links are the atoms, the moleculs are the links togheter.

Another example it’s “a search form molecule is composed of a label atom, input atom, and button atom”

When combined, these abstract atoms suddenly have purpose. The label atom now defines the input atom. Clicking the button atom now submits the form. The result is a simple, portable, reusable component that can be dropped in anywhere search functionality is needed.

Brad Frost

Organism

It’s a piece of UI more complex, that have inside Molecules, and Atoms.

For example, a Header.

This header above, has:

• Logo (Atom)
• Nav Primary (Molecules)
  • Nav Links Together
• Button (Atom)

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Brad Frost

Templates

This it’s more for designers. Means wireframes, here Brad stop to do the comparisson with the Chemical.

But in a few words, means Wireframes – Skeloton of the desing, the structure. Before put pretty with design.

This is for do the design of the “Content” before have the content. Determinating the leght of the texts, sizes of the images, etc.

Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.

Mark Boulton

Pages

Means the final design, with colors, borders, final copy, etc.

The thing that you will develop.

Well, well, wweeeeeeeeell…

Now, how we could implement that on Bricks?

My approach to implement Atomic Design on Bricks.

Atoms in Bricks.

To implement the atoms, we should do the Global Styles adjusment when start with the development.

For exmaple, start doing the buttons styles, setting the colors, something that I didn’t before could be setting the Fields of the forms, sizes of typhografies, the links.

This could be a good Approach to start with the “Atoms”, this data should be delivery to you on a Figma File for example, with a page with Global Styles or from the Variable Manager from Figma.

Molecules in Bricks.

The molecules, it’s ideal to build in Component Element on Bricks.

This new Feature allow us build a little differents no big complex elements, on Bricks, and allow us edit the CSS from a site, but also the HTML from a site. And if in the future change something, or we do a mistake, we could change directly from a one component and will change to the rest of the website.

I recommend use this for:

• Buttons complex -> With Icons, variables classes, variables sizes.
• Cards
  • Team member cards
  • Features Cards
  • Services Cards
  • Etc.
• Something that are in a Loop
  • A good thing to think it’s if it’s pottencial to go in a Repater, have a components could be a good practice.

Also, the components on Bricks 2.0 allow us put Components inside other components. (I thinks that before they don’w allow, but don’t remember well)

The thing it’s that with that we have a lot of posibilities to do more complex the component!

But… I don’t recommend you do very complex the components because could be harder to manage later.

To do something more complex we will have the Next Level.

Organism on Bricks

Organism, it’s components, atoms, molecules togheter.

And this it’s an idea Scenario for use Templates from Bricks.

Because we will have a different screen to manage alll the data separatly from the Page that we are developing in this time, and will be faster the builder.

For example, if you’re doing a Mega Menu with a lot of links, super complex thing, this could be a good instance for have a Template.

Another Idea it’s for manage Header, Footer, Popups, because you want point where will be apply this templates from one site. Maybe you don’t want show the Header in a Landing page, so you can exclude. Or you will have 2 headers differents for some pages, so instead delete each header from a page if we manage with Component a header, you can point from template the specific pages that want show this header 2.

In sum up:

• Templates from Bricks to manage complex structures
• Structures that you want to manage separataly
• If you want point by condition where you this templates from template settings
• You have for example a Banner Promo and want to you before the footer always.
• Or if the Component instance on Bricks doesn’t works good for you, you always can do a template

And the last clarification it’s that componentes and Templates are for thing that you want repeat in the rest of the site, that you think that you will re-use.

And, this it’s all!

Mariano.