Storybook & Atomic Design

In this course, we build a pattern library with Storybook, React, Styled-Components and deploy it with Netlify.

The course has a heavy focus on Brad Frost's Atomic Design principles, covering atoms, molecules, organisms, templates, and pages. Before adding an unofficial term 'particles' into the methodology to allow us to manage and influence data in our application.

This course is a great introduction to modular website design and development and allows those unfamiliar with tooling to get a React environment up and running fairly quickly.

View YouTube Playlist

Storybook & Atomic Design – 1.0. – Introduction and Final Product

In this lesson, we go over what Storybook is, how we will use it in a React environment, and what we will have built by the end of the course.

Storybook & Atomic Design – 1.1. – Atomic Design Principles

We will be using the atomic design methodology to component development in Storybook, grouping our stories by the level of structure they belong to.

Storybook & Atomic Design – 1.2. – Getting Started with Storybook

We'll be using Storybook with a Component Driven Approach to our website. Building components in Storybook first then integrating them into our application.

Storybook & Atomic Design – 1.3. – Building Our Stories

In this lesson we cover the basics of writing Storybook stories, how we can use a custom directory structure and finally importing a custom React component.

Storybook & Atomic Design – 1.4. – Building Our Application Wrapper

In this lesson we cover how to include a global wrapper that will pass down global props and information relevant to our application styles, logic and data.

Storybook & Atomic Design – 1.5. – Building Our Button

In this lesson, we'll be revisiting our Button component. Adding new properties that we will process and document in our pattern library.

Storybook & Atomic Design – 1.6. – Styling Our Button

We are going to cover how we can use the styled-components package to write isolated styles that apply to any instance of our Button component.

Storybook & Atomic Design – 1.7. – SVG Support

SVGs are amazing, they allow us to make use of vector graphics within our applications and have support for CSS properties to dynamically change the styles.

Storybook & Atomic Design – 1.8. – Storybook Add-ons

So far we've covered how to add basic documentation functionality, however, we can take it a step further with Storybook add-ons.

Storybook & Atomic Design – 1.9. – Building Our Navigation

In this lesson, we'll be building our navigation molecule, as it will hold many children nodes of the classification atom (links, list items, buttons).

Storybook & Atomic Design – 1.10. – Building Our Footer

In this lesson, we'll be building our Footer component. The Footer component falls under organism concept, as it could contain molecules and atoms.

Storybook & Atomic Design – 1.11. – Building Our Header

In this lesson, we'll be building our Header component, this falls under the concept of organisms as it could contain molecules and atoms as children nodes.

Storybook & Atomic Design – 1.12. – Building Our Post Template

Our Post Template is a consistent page layout that our users should be able to identify when visiting content of the same content type within our website.

Storybook & Atomic Design – 1.13. – Building Our Homepage

In this lesson, we'll be building our homepage in Storybook. The homepage will not be a React component but rather a high-level grouping wrapper.

Storybook & Atomic Design – 1.14. – Apollo Provider

In this lesson, we'll be extending our layout wrapper component with an Apollo Provider particles to interface with external GraphQL APIs.

Storybook & Atomic Design – 1.15. – Responsive Styled Components

In this lesson, we'll be looking at how we can create helpful SCSS mixin inspired JavaScript references to use throughout our styled components.

Storybook & Atomic Design – 1.16. – Deploying Storybook to Netlify

So far our Storybook project has been confined to those with access to the project files, we will now cover how to deploy Storybook to Netlify for free.