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
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
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
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 for 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 site's design patterns into bite-sized chunks makes 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.
Bigger 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.
