We follow Atomic Design by Brad Frost. Read the book online.
Since atomic design is just a concept and very simple, often too simple for large scale projects we decided to extend it. To have a valid reasoning for the names we looked at Extending Atomic Design.
We decided to add, ions to allow design-tokens, utility functions or similar.
One of the reasons we love Atomic Design is the ability to add new levels without breaking the methodology.
Ions are entities that are too small to render or just deliver logic.
Good examples are:
- constants
- contexts
- hooks
- design-tokens
- utility functions
Atoms are components that don't have any smaller component in them. They can use HTML elements or Ions.
Good examples are:
- Buttons
- Icons
- Input elements
- Input labels
- Links
Molecules are components that have one or more Atoms and or smaller atomic entities.
Good examples are:
- Searchbar with Input, Button and Label
- Menu with Links
Organisms contain one or more Organisms and or smaller atomic entities.
Good examples are:
- Header with Searchbar, Logo and Menu
Templates provide render and layout logic that changes based on data.
Pages are the entry point of a user. A page will collect data from the server or another source, choose a template and render and fill it with data. In our case pages will be used by next.js. We love how nicely this fits into our structure.