Atomic Design

10 May, 2020 - 5 min's read

Hi, I would like to share with you the experience of using the Atoms Design. Continuing the post of methodologies CSS, I will consider one of the modern methodology for app structure - Atomic Design.

Atomic Design

So, what is Atomic Design? Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms - small elements without business-logic (ex.: buttons, inputs or some HTML-tags).
  2. Molecules - a group of atoms forming one molecule without business-logic (ex.: input with label).
  3. Organisms - a group of molecules joined together to form a relatively complex, distinct section of an interface with business-logic (ex.: forms).
  4. Templates - a group of organisms uniting it together. (ex.: template site without data, or design layout).
  5. Pages - data fillers of created templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

More details with images here.

Experience using methodology

  1. Before starting development, I would suggest designing a possible structure of atoms, molecules... and their names.
  2. There will be a lot of atoms, so you need to choose the correct names to identify them.
  3. Using templates is an extremely specific process. For some frameworks, you can skip this step, and form the template on the page.
  4. In some cases, it is more advisable to choose a different methodology.

📝 Notes

This framework allows you to reuse components, making structure your application more flexible.

🔗 Links

  1. Atomic Design

You can ask questions in the comments. Thanks for reading this article!

Codeblog © 2020