-
Notifications
You must be signed in to change notification settings - Fork 4
Atomic Design
Components are designed and built using Atomic Design.
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
Atoms also include design tokens such as spacing, color and typography.
Most atoms have a template file for use in the component library only, and related Less files are in the theme's global directory.
Molecules are relatively simple groups of UI elements functioning together as a unit.
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages are specific instances of templates that show what a UI looks like with real representative content in place.