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.

BEDROCKLAYOUT PRIMITIVES

The Lodash of Web Layouts

A collection of utility components that are designed to be used as building blocks for your web application's layout.

GitHub Repo stars

Composable Layouts

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>
  );
}

Most of the layouts we use on the web are not that unique. They often can be broken down into just a handful of layout patterns. It is the combination of these patterns that make up the overall layout.

Bedrock Layout Primitives are built with this in mind. Each component is built to do one layout pattern well. By composing these individual components together you can create your own custom layouts. Many of the "complex" layouts that we make on the web can be created by composing together a handful of the Bedrock Layout Primitives. There are more examples of layout recipes in our examples section.

You can learn more about layout composition in the the Getting Started Introduction.

Your Design System's Missing Components

Your typical design system will have a lot of components, but only a few of them are dedicated to placing those components in your page. Bedrock Layout Primitives are designed to help you augment your design system, by giving you a set of layout primitives that can be composed together to create a complete layout.

You can use Bedrock Layout Primitives with any design system. Bedrock Layout's spacing scheme can be easily overridden to match your design system. Check out the instructions on how to integrate the Bedrock Layout Primitives into your Design System.

<Grid minItemWidth="30rem">
  <Card/>
  <Card/>
  <Card/>
</Grid>
<InlineCluster justify="end">
  <Button primary>
    Primary
  </Button>
  <Button>
    Secondary
  </Button>
</InlineCluster>

Not Just For React

<header data-bedrock-cover>
  <nav data-bedrock-inline-cluster>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <div
    data-bedrock-cover-centered
    data-bedrock-stack
  >
    <h1>Coco Le Belle</h1>
    <div data-bedrock-split="fraction:1/3">
      <p>
        <strong>Coco Le Belle</strong>
        is an online fashion boutique.
      </p>
      <img src="logo.png" />
    </div>
  </div>
</header>

Don't want to use React? We have you covered. Bedrock Layout Primitives is also a CSS Framework. Built using data attributes, you still retain that component like developer experience without polluting the your class names. Any app that utilizes html and CSS can take advantage of Bedrock Layouts. Check out the instructions on how to use Bedrock Layout Primitives in your app.

A solid.js version is also in the works. You can checkout Solid-Bedrock over at solid.bedrock-layout.dev.

Ready to Get Started?

You can start by going through the tutorial over in our Getting Started introduction to learn the basics of how to use Bedrock Layout Primitives.

You can also check out the API of any of our individual components, for example the Stack component.

Contributors

Thank you to everyone who has contributed code so far. Get Involved yourself!

In addition to the above, the following have provided feedback, ideas, and documentation:

Anthony Campolo ajcwebdev
Pete Smith httpete
Rajat rajatk16
Alex Trost
Michael Chan

Sponsor Bedrock Layouts

You can sponsor Bedrock Layouts on Github Sponsors.