Storybook & Atomic Design - 1.1. - Atomic Design Principles

GitHub - whatjackhasmade/storybook-atomic-design-react

Contribute to whatjackhasmade/storybook-atomic-design-react development by creating an account on GitHub.

Atomic design is a popular approach to modern website design and development.

It was pioneered by Brad Frost in 2013 and has been adopted universally as the methodology associated with logical component-driven focused development. With modular design approaches popularising in the following years, it's safe to say that Brad's methodology helped influence the design and development industry.

We will be using this popular method to develop our components in Storybook, grouping our stories by the level of structure they belong to.

This will make sense as we progress through the course where I will demonstrate building an atom, molecule, organism. Before we later dive into building templates and pages.

Brad's five core concepts of the method include -

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Atoms - Atoms are the smallest (universally agreed) components found within a product or system. These usually include links, buttons, inputs, paragraphs, headings, icons, colours, and are used in combination with one another to construct molecules or organisms.

Molecules - Molecules are a step up in size from atoms. They could include navigation lists, input groups, text groups, and other structures which are made up of several atoms. The navigation list, for example, is made up for list items, links, text, and other small atoms, that when combined create the larger structures.

Organisms - Organisms, are again another step up, larger than atoms and molecules, they are a combination of either molecules or atoms and molecules. Organisms could include a hero banner, call to action section, footers, headers, forms and any large structures you find in a page.

Templates - Templates are common layout patterns that you find across a system. For example, a blog post would have a template, and so would a product page. These are pages with predefined layouts made up of organisms and molecules. Having predefined templates creates consistency and empowers the user to make use of your product

Pages - Finally pages are the highest level concept of the methodology. Pages are unique layouts that aren't necessarily repeated throughout your application. You may have a landing page that uses atoms, molecules and organisms in its construction but doesn't follow a predefined layout. This layout may include components in sequential order which don't follow a pre-determined order in your system.

Atomic design covers just about everything visual in a system.

We cover colours, fonts, small elements and more in atoms.

We cover larger components in molecules and organisms.

Before we finally cover large layouts in templates and pages.

However, we do not cover logic in our atomic design structure.

I mean we cover logic in terms of visual logic (colours and fonts) with atoms, but we don't handle logic when it comes to theme variables, SEO and head tag rendering, component parsing, data manipulation, state management and managing our custom functions.

So enters the concept of particles.

Particles was a naming convention introduced to me by Brandon Hawkes.

Whilst I'm not clued up on my Physics, I love the idea of separating the logic for the system into its own concept structure whilst still including it in a component directory.

The particles function as processors for logic and data and hold influence over how components from atoms to pages are rendered in the system. In React environments this logic can be extended across an application using Storybook to store global functions, state management processes and much more across all of your React projects, the possibilities are endless.

In the next lesson, we'll be creating our Storybook React project so that we are prepared to start building our atomic components.

I could chat about Atomic Design, pattern libraries and design systems for hours. To keep a focus on building a pattern library as opposed to a course on atomic design solely, I invite you to do some further reading on the subject.

Component Driven Development (CDD) in React

In this article, I aim to demystify the term Component Driven Development in plain English and how it applies directly to React.

Atomic Design | Atomic Design by Brad Frost

Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.