Woodlands.co.uk Components

The goal of this project is to create components which can used together to build all the design requirements for the website. The idea about components built this way come from the “Atomic Design“ principle, which is described as;

creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before.

Atoms, Molecules, Organisms

Atomic Design is broken down in to the following concepts;

  • Atoms: Foundational building blocks that comprise all our user interfaces.
  • Molecules: Simple groups of UI elements functioning together as a unit.
  • Organisms: Complex UI components composed of groups of molecules.

Component Categories

The “Atoms”, “Molecules” and “Organisms” nomenclature can feel a little abstract. This project uses terminology which is easier to translate from components to website.

  • DNA: Branding, typography and colours.
  • Utilities: A single purpose and specific role.
  • Blocks: Simple groups.
  • Components: Complex UI components.
  • Global: Appear on every page on the site.
  • Templates: Layouts for particular page types.

Found Out More…