Atomic Design

DPC uses the principles of Atomic Design when creating, engineering, and modularizing components.

The basis of the principle is to start at the smallest portion of a component first and then expand outwards.

This is based off of pricinples in biology where the concepts that atoms make the building blocks of everything and help to make more complex systems

We will go over the the principles of the following to help understand atomic design patterns and priciniples

The purpose of focusing on Atoms and Molecules is to make changes or migrations as easy as possible with updates only needing to happen in an Atom or Molecule

Atoms > Molecules > Organisms > Templates > Pages

Atoms

In biology Atoms are the basis of all structures that we currently know. They are defined in teh Periodic Table and are able to combine to create more complex structures. The way atoms make up the baisis of real world structures we try and translate that into the FED coding systems by creating the smallest, most focused possible, element that can then be stacked and added to multiple other elements to create new structures.

These atoms are the smallest most elements that cannot be broken down further without losing meaning

Molecules

Molecules are created from multiple atoms structured together. These are held together and take on unique properties based on the atoms used to construct.

Organisms

Organisms are fully functional components built up from Molecules to function as a unit. It is a complex strutcture. An example could be Header, or Footers. Elements that take multiple molecules (i.e. navigation, search, log-in, etc.) to create and function as one whole

Templates

These are the skeletons of site that will fill in and hold the Organisms and eventually have a fuly flushed out page.

Pages

Complete pages