Question:

Describe the Atomic Design Approach in detail.

Atomic Design

It’s a method that is at the core of what style guides are built upon. Atoms compose the smallest part of an element- for our purposes let’s consider them the smallest- then we have molecules, orgainisms, templates then pages.

The diagram above illustrates these steps let’s break each step into there own parts so that we can better show how each part makes the final site.

Atom

Atoms pertain to the smallest parts of functional html elements like input, buttons, and labels. They can stand on there own but don’t really do anything useful by themselves.

Molecules

When atoms come together they form molecules - think of these as a button with an input etc. So with this in mide we could say that to qualify as a molecules you have to have at least two atoms together to form a molecule.

Organisms

Organisms a step up from molecules in that they are usually much larger and they carry out sole specific purpose such as a sign up form or a banner.

Templates

When we get to this stage we have something that look like a rough draft of our site. Where concerned more with the placement of elements and how they are going to to fit on the final draft. Styling or content is not important here.

Pages

Yes we made it to the end of our final webpage. We take our template and add styling and content to give it the final polish that we would call done in most regards.

Summary

We have reached the end of this article I hope that I have explained this clearly the atomic mindset when developing a webpage.