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.
So, what is Atomic Design? Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:
- Atoms - small elements without business-logic (ex.: buttons, inputs or some HTML-tags).
- Molecules - a group of atoms forming one molecule without business-logic (ex.: input with label).
- Organisms - a group of molecules joined together to form a relatively complex, distinct section of an interface with business-logic (ex.: forms).
- Templates - a group of organisms uniting it together. (ex.: template site without data, or design layout).
- 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
- Before starting development, I would suggest designing a possible structure of atoms, molecules... and their names.
- There will be a lot of atoms, so you need to choose the correct names to identify them.
- Using templates is an extremely specific process. For some frameworks, you can skip this step, and form the template on the page.
- In some cases, it is more advisable to choose a different methodology.
This framework allows you to reuse components, making structure your application more flexible.
You can ask questions in the comments. Thanks for reading this article!