Atomic Design for Sitecore

Atomic Design is a popular design methodology for the development of websites. The main principle of this system is that we have to create a design system, but not the pages. Let’s figure out if this methodology applies to Sitecore and how we can use it.

Atomic design methodology takes cues from chemistry. And divides the design into 5 atomic stages:

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

Atoms are the basic building blocks. They include HTML elements, like inputs, buttons, and images. Atoms could not be divided into smaller pieces. Molecules are simple groups of UI elements that work together. It can be the search input together with the button. Or, hero image, banner, carousel, and components that we used in Sitecore web development. Organisms are the next stage. They are relatively complex components UI elements that contain atoms, molecules, and other organisms. Examples of organisms are header, footer, and grid of products. Templates are page-level stage that contains organisms and molecules to create the page structure. Templates focus on the content structure, but not on the final content. The last stage is pages. It shows how the page looks with the real content.

Atomic design methodology works well with Next.js projects. You split your code into the building blocks according to these principles. It is easy to develop and support. Your project doesn’t become a mess when you follow these principles.

But, what about Sitecore? How well does it work together?

Sitecore JSS and Atomic Design

Developers control page presentation in the usual Next.js project. But, if you use Sitecore, this responsibility is divided among content authors and developers. Developers create building blocks and authors put them together to create the pages. If we use atomic design methodology, only atoms and molecules remain in the code. Molecules are your renderings. They are present in both, code and Sitecore. They are present in code as JSX/TSX files and in Sitecore as rendering definitions. All higher levels are moved to Sitecore. There is a gap for organisms. I didn’t find the exact corresponding entity in Sitecore. Atomic design templates match to presentation details on Sitecore templates. (And that is great, that here is used the same term “templates”!). Atomic design pages correspond to presentation details on items.

We get an almost complete following of Atomic Design methodology. Part of the stages remains on the code level, part is in the Sitecore. But, could it be better? Yes, when we add Sitecore Experience Accelerator.

Sitecore SXA and Atomic Design

Firstly, let’s talk about clean Sitecore SXA, without JSS.

It looks like SXA was built on top of Atomic Design principles. I can find corresponding entities for each of the stages.

1. The rendering variant field corresponds to the atom. You can use HTML tags, field values, tokens, texts, Scriban codes, etc.
2. The rendering and rendering variants correspond to the molecules. Usually, your rendering is simple groups of UI elements that work together.
3. The partial designs correspond to organisms. You can configure your headers, footers, and other quite big parts of websites with partial designs. They will contain rendering/molecules defined at the previous stage.
4. The page designs correspond to templates. Or if you don’t use page design for some reason and use presentation details configured on templates, it still matches atomic design principles.
5. Items presentations correspond to pages.

If look deeper, Sitecore SXA has even more advanced design principles than atomic design. We have rendering on the molecule level, but we also have “molecule variants” that allow molecules to look differently. Presentation details for partial designs, page designs, templates, and items have versions(language and numeric), and have division on final and shared presentation. It adds more substages for organisms, templates, and pages stages.

Sitecore SXA + JSS and Atomic Design

You also can get a full match of Atomic when you use Sitecore SXA + JSS for your website. SXA added the missing organisms stage. Now, you have atoms and molecules in your code. And organisms, templates, and pages in Sitecore.

Conclusion

Sitecore architecture already forces you to follow design principles. You have renderings, page designs, partial designs, presentation details on templates, and presentation details on items. This division is very similar to Atomic Design Methodology. Stages can have different names, but the main principles remain the same. All that you need, before saying that you use Atomic Design Methodology for your Sitecore project is to divide components into atoms and molecules in your Next.js project!