Loading...

Atomic Design in Mind - Unleashed Technologies

Atomic Design in Mind

Understandable, flexible and maintainable code is something we all strive for but it can begin to become unmanageable when your project grows or gets passed between many hands. A shaky foundation leads to a toppled building. Atomic Design is not a hot new technology or framework. It is akin to SMACSS, in that it is a mental model or methodology for organizing and writing your code. It is not limited to a specific language and it can easily be applied to your tech of choice. Believe it or not, HTML is already highly attuned to these principles.  A page's HTML structure is in a modular fashion already by design. Extending this methodology to your JavaScript and CSS files is a natural step to a more clear and flexible code.

What is Atomic Design?

The key principle is that user interfaces consist of five different layers that build up from one another in sequence. You should keep these building blocks of atomic design in mind when creating or refactoring a project.

Atoms Icon - Atomic Design in Mind - Unleashed Technologies Atoms

The first set of building blocks are called atoms. These are elements that can’t be broken down any smaller. From a styling standpoint, singular styles like fonts and colors are thought of as atoms as well. Some examples of atoms are HTML elements like inputs, labels, buttons, etc.

```

_atoms/

  _image.scss

  _input.scss

  _text.scss

  _button.scss

```

Molecules Icon - Atomic Design in Mind - Unleashed TechnologiesMolecules 

Molecules are the next step up in the atomic hierarchy. You combine atoms to create more complex UI elements (say a search bar). It consists of an input combined with a button and perhaps an icon is used for the button label. All these elements wrapped together gives us our singular molecule, the search bar. So combining these basic atoms yields us more interesting and useful elements like a card, navigation-bar, or a user’s comment.

```

_molecules/

  _card.scss

  _comment.scss

  _search-bar.scss 

  _navigation.scss

```

Organisms

Organisms are relatively complex and are multiple molecules and atoms combined. This combination of atoms and molecules lead to more complex elements like a header, sidebar, or footer. So think of a comment(molecule) but now it's housed with a bunch of other comments within a chat-box area(organism).

```

_organisms/

  _footer.scss

  _chat-box.scss

  _header.scss

  _sidebar.scss

```

Templates Icon - Atomic Design in Mind - Unleashed TechnologiesTemplates

The fourth rung up the ladder is Templates. This layer consists of a number of organisms, molecules and atoms living together but in sectioned and ordered ways. Templates establish the layout of all our previous components. So an example shop-template could have the body(organism) in the middle between our chat-box(organism) on the left and sidebar(organism) on the right.

```

_templates/

  _about-template.scss

  _blog-template.scss

  _home-template.scss

  _shop-template.scss

```

Pages

Finally, we come to the top of our pyramid or bottom depending on how you want to look at it, pages! Pages are the level we're used to thinking in. It encapsulates everything from earlier in the atomic chain. This is our whole atomic universe in its entirety. At this point, we have assembled and ordered all our elements into one cohesive entity.

```

_pages/

  _home-page.scss

  _blog-page.scss

  _contact-page.scss

  _shop-page.scss

```

Above illustrates how you can begin to break down all your styles into these smaller to larger groupings. You utilize a more tangible and intuitive system of creating and ordering your style-sheets. This offers many benefits not only for you but also your team and the client.

Modularity

When your code is more modular and reusable your life gets easier and sanity stays intact. Breaking down your whole sites design patterns into bite-sized chunks make it easier to understand and follow. This is not too far from the React philosophy of breaking your larger jsx components down into increasingly smaller components. This simplification of code leads to being able to easily use and combine elements into new complex forms.

Folder Icon - Atomic Design in Mind - Unleashed TechnologiesBigger Picture

One of the big benefits of atomic design is that you can present your file structure to anyone, be it the client or new member of your team and it will intuitively make sense from just looking at the structure and what the file pertains to. You may find yourself sacrificing huge style-sheet files for many smaller files but that gives you a significantly wider yet focused view of all your styles, thus giving you more control.

Flexible System

The atomic design makes it easier for your whole team to get up and running and having an atomic architecture allows for quicker prototyping of your design from mock-up to workable demo. The design process is an iterative process. Being able to work efficiently and make adjustments quickly to the client-side is crucial, within the back and forth between client, designers, and developers. With the atomic design principles in place, it is easier to make changes to your code without breaking it. You will know exactly where and how to edit the element in question. Making changes at the atomic level will reverberate all the way up the atomic sequence, through your project.

Wrapping it Up

You can start to see how this way of structuring, writing, and thinking about your code is a benefit to not only you and your team but the client also. Whether starting a brand new project or restructuring your current one, writing with atomic design in mind makes your code more understandable, flexible and maintainable.