Atomic Design Concepts

Nathan Phelps
September 12, 2017
Yellow atom symbol on a blue circle background


Have you ever stopped and pondered the universe? Why does it exist? What role do you play in it? Why do you exist? What’s the point in it all? You’re such a small part of something so much bigger… but what? Are you just a speck on something much larger?

Think of it this way: You are a button on a website.


Just think about it. I mean, it almost works, right? Meh, I tried.

So, I’ve recently gotten to work with the Atomic Design pattern. It’s kind of fun. Imagine your website as an entire world, but… also just a website. It is full of living things, but it also has normal, real pages like an actual website. Pages that we aren’t imagining as living things. The real world kicks in at some point, so we have to stop playing games when it’s time to make page templates.

Atomic Design starts at the smallest pieces (Atoms) and progresses all the way up to Pages. Here’s the break down along the way:

Atoms: HTML Elements. Stand alone little nuggets that need to be clumped together if they’re ever going to have any real purpose. <a> tags, <button> tags, any kind of <input>. Basically anything that can be placed anywhere on its own.

Generally, these should only be a single element, but the same element might serve different purposes on the site. You might have 4 kinds of buttons on your site, so you would need four different atom templates for it, or else the ability to pass in classes to your single “button” atom template. You can do the same with headings, pictures that may require certain styles, icons, or anything else that should be a reusable, simple, place-anywhere HTML element.

Molecules: Clusters of atoms.

It is what it sounds like. Any clump of those atoms you created (and maybe something else custom but not used more than once) that you will find all over the site. I like to use the example of a “card”, that might contain a user or author’s name, photo, and job/personal bio. Each of those pieces could a separate atom (header, picture, and paragraph) that have reused styles throughout the site, but now they are pushed into one, recurring cluster.

Organisms: More complex parts of the site. Molecules working in one unit.

The simplest way to move up in the site’s structure would be to just say, “Molecules are a bunch of atoms, and organisms are a bunch of molecules.” Simple enough, but your organisms should strive to be a bit more than that. An organism should stand out a little more than just “a lot of molecules”. A good example might be a directory that lists all of the authors on the site (with the cards you made earlier).

Another example could be the header on your site. Maybe your logo is on the far left, you’ve got your main navigation list molecule (possibly even an organism of its own) in the middle of the header, and then a Login/Logout profile section to the far right. You might even have a lesser menu in a second row or sliding out from the side This is an enormous, living, notable part of your site. Your organisms can definitely be more than just a bunch of molecules.

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. -

Template: Set up different types of pages

A template is basically exactly what it sounds like. From this point on, the terminology is no longer an analogy. Back to the office, now. No more imagination… *tear*

Templates represent and frame up all the different types of pages you may have in your site. Front page, landing pages, articles, store listings.

Pages: Living instances of templates

Once you have all of your molecules created and templates drawn up, you should be able to create pages from those templates, using your actual content. Pull in your data, images, stories, or whatever you have that you think will compete with cat videos, and you’ll have yourself some web pages on the INTERNET.

So maybe you are a button on life’s interwebs. Sitting on planet YouTube, under an old video of old memes that people still stumble across five years after everyone forgot about those out-of-date memes. Maybe you’re one of millions of other subscribe buttons that have only been hit less than a hundred times. A common part of a common molecule in a common organism in a reusable template that hundreds of millions of videos have used. So what? You’re still you, and that makes you special.

On a final, note:

If you’re interested in using Atomic Design in a future project, be sure to try out Pattern Lab, which is intentionally made for Atomic Design development. It works with PHP and Node.

It has a Drupal-specific iteration as well, which is what we have been using it for. It supports Twig, which is the templating engine that Drupal 8 uses, and it makes live developing easy.

My favorite feature is the self-documenting behavior built into Pattern Lab.  As you run the compiler while developing your templates, Pattern Lab updates a reference to all the atoms, molecules, organism, templates, and pages you’ve made, even allowing you to test them at different widths. All of your different categories are sorted and index in a drop down menu, allowing you to view each one separately or all together. No more hoping that your whole team is documenting well, because it is already being done. It’s fantastic.

For a more in-depth synopsis of Atomic Design, here’s a great article:

Thanks for reading! I hope I cleared up any existential crisis you might be in.

Happy templating!