Atomic Design
This project has been built using the Atomic Design Methodology. Please adopt this strategy when building your components (brand specific & shared) as it is important that we maintain consistency across the platform.
There are five distinct levels in atomic design:
- Atoms
Atoms are small, simple components such as a form label, an input or a button. Whilst Atoms don't contain any functions or actions, it is common for Atoms to have many states.
- Molecules
Molecules are groups of Atoms used together and form a more complex component such as a form.
Molecules can have their own properties and create functionalities by using atoms, which don’t have any function or action by themselves.
- Organisms
Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
- Templates
Templates consist mostly of groups of organisms grouped together to form our page layouts.
Similar to wireframes, they should not have any styles or colors and only be used to build the structure of our pages.
- Pages
Pages are specific instances of templates. These components get real content and are connected with the application (routes).
Our components folder (brand specific & shared) should contain nested folders for Atoms, Molecules, Organisms and Templates.
Please consider your Next JS Page Components to be a part of the Atomic Design Pattern.
You can use this command in your package directory to generate your components folders:
mkdir components && cd components && mkdir atoms && mkdir molecules && mkdir organisms && mkdir templates && cd ..