Front-end Architecture with Atomic Design

Understanding better CSS with Atomic Design and building an awesome Architecture. — Part I

Part I

I started to work on a project that follows Atomic Design methodology.

I always started a project following this methodology, due the pressure of the deadlines, I always ended up doing some shitty code. This time I decided to follow patiently.

Well, I'm using Sass. I'll show you the simple architecture that I made for this project.

First I'll explain how Atomic Design works…

Atoms

Understanding Atoms in Front-end Development.

The smallest indivisible particle of matter. Today, we all know that it's not like that, but we'll get there.

Atoms is like our inputs, buttons, labels etc. And on their own are almost useless.

Molecules

Understanding Molecules in Front-end Development.

Group of Atoms. Following the previous example, joining our inputs (e-mail and password),labels ("e-mail" and "password") and button, we build a molecule-form.

<form class="molecule-form">
  <label class="atom-label">E-mail</label>
  <input type="email" class="atom-input">
<label class="atom-label">Password</label>
  <input type="password" class="atom-input">
<button class="atom-button">Login</button>
</form>

Organisms

Understanding Organisms in Front-end Development.

Group of molecules and possibly atoms. Seeing the code is much easier for this part:

<header class="organic-header">
  <img src="" class="atom-logo">
<ul class="molecule-menu">
    <li class="atom-item"></li>
    <li class="atom-item"></li>
    <li class="atom-item"></li>
  </ul>
</header>

And now I'll explain about Bosons, elements that doesn't exist in the Atomic Design Methodology, but was created by Suissa. Here things starts getting more interesting. ☺

Bosons

You already have heard about Bosons, right? It is smaller than Atoms. Quantum physics explains how particles gain mass, by Higgs Field. So the boson are particles that gives mass to others. Which we can use as placeholders in Sass. Looking at the photo below, we can see that %boson-button and the %bosson-button-success are giving mass to .atom-button.

Understanding Bosons in Front-end Development.

The greater is the interaction between the particle and the Higgs Field, the more mass it gets. Remembering the placeholders doesn't exist until you @extend them.

In the above example we notice that .atom-button has a interaction with bosons. And in the end, it'll be:

.atom-button {
  padding: 6px 12px;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 3px;
  background: green;
  border-color: dark-green;
  color: white;
}

After the interaction with bosons, our atom gained mass.

I separeted in boson-button (structure) and boson-button-success (UI). So, whenever I want to build a button, I just @extend my bosons.

.atom-button-save {
  @extend %boson-button;
  @extend %boson-button-success;
}
.atom-button-cancel {
  @extend %boson-button;
  @extend %boson-button-danger;
}

There's more, the Quarks. But let it for another day… :P

In the next post we'll see the architecture that I built for this project.

Front-end Architecture with Atomic Design

Front-end Architecture with Atomic Design