Since I’ve learnt about component-driven design (cdd), I’ve kind of never really looked back. It allows me to create reusable and data-agnostic components in my front end so that I can speed up my engineering cycle, whilst also still having complete control over how it looks. It also means as a client requests more and more features, I still have complete confidence in the reliability of the front end.

Resources

• Component Driven Wiki

• Component Driven Design by Tom Coleman

Basic Principles

Global Styling

A list of numbers that define global styling of the components so that they can be changed in one place to effect how ALL of the components will look. For example border radius, colours and shadows.

Atoms

Avatar | Icon | Text | Image | Card

The smallest components. Define each state (size, colours etc..) and test with mock data. Sometimes may take in other atoms as children (e.g. cards)

Molecules

Buttons | Inputs

Still very small, but usually consist of a couple of atoms. Molecules will also usually have a variety of states (primary, secondary, loading, etc..) and are tested with mock data.

Organisms

Forms | Header | Table | Lists

Take on various sizes, and will consist of a lot of atoms and molecules. Remember at this stage, the components are still data agnostic so will need to be tested with mock data, especially in the edge cases. Some organisms will need to be designed for a variety of form factors too, such as mobile or web.

Page

Sign In | Profile | Feed

At this point, you will connect organisms to API requests - sometimes swapping out which components are to be rendered due to the data the front end has available.

Project

Blog | E-Commerce | Portfolio

Combine pages together using routers and deep links to allow users to navigate between pages