No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Introduction

We have entered the age of components. Most front-end frameworks, like React, use components as their foundation. There are several reasons for this, but crucially, components allow applications to be broken into simple, single-purpose parts that can then be composed together to solve more complex needs. This is especially true when considering the layout of your web application.

What is composition?

Composition, simply put, is when you build something greater than the sum of its parts. For example, an organism is composed of organs, which are composed of organ parts, which are composed of cells, which are composed of atoms. A musical composition can be broken down to nothing more than masterfully applying rhythm and tempo to 12 unique notes, creating all of our musical masterpieces.

Composition also applies to web layout. Complex layouts can be broken down into simpler "layout primitives," as described by Heydon Pickering. These layout primitives are single-purpose layout components that do one thing and one thing well. It is by strategically combining these primitives that we achieve more complex layout structures.

An Example of Layout Composition

Let's take the below hero layout, for example:

A wire frame of a hero layout

Naively we might choose to lay it out as a single component, but it is not the only way to do this. We can also break it down into smaller composable components, like the following:

A breakdown of the hero layout wire frame as composable components

In code, this would translate to something like this:

export function Hero() {
  return (
    <Stack>
      <Inline>{/* */}</Inline>
      <Split>
        <Cover>
          <Stack>
            <h1>{/* */}</h1>
            <p>{/* */}</p>
            <Inline>
              <button>{/* */}</button>
              <button>{/* */}</button>
            </Inline>
          </Stack>
        </Cover>
        <Frame>
          <img />
        </Frame>
      </Split>
    </Stack>
  );
}

This is the why Bedrock Layout is called the "Foundational Layout Primitives for your React App." By strategically combining these primitives, we can create complex layouts that are easy to understand and maintain.

Prior Art

Prior to creating Bedrock Layout Primitives, I have worked on two internal-only design systems. In addition to that experiance, I would have to say the resource that has inspired me the most has got to be every-layout.dev. This resource is fantastic and worth the money for the time and energy they have spent making it.

Okay, I am ready to start

If you would like to take a deeper dive into layout composition, I would recommend taking my course, Composing Layouts in React.

In the following sections, we will be using Bedrock Layout Primitives to create a landing page for a fictional company called Coco Le Belle. To make things simple, we will be using create-react-app and yarn, but you should have no problem using npm as your package manager. In the next section we are going to learn how to install Bedrock Layout Primitives into a new project.

Installation