Atomic Layout is a lightweight React library that allows you to generate a grid-based responsive layout for your components.

Modern CSS libraries like styled-components and emotion are incredibly useful because they allow you to create isolated, local CSS that applies only to the intended specific components.

But since both libraries are focused only on writing CSS inside JavaScript, it means that you will have to write the CSS rules required for creating the responsive layout yourself.

For example, suppose you have a card component design as shown below. The left side is for the mobile views while the right side is for tablets and desktops:

Without the help of third-party frameworks like Bootstrap or Bulma, you need to create your own container style and add a media query rule to make the component responsive.

The following example code will implement the above design using the CSS flexbox model:

The React component above is composed of three small, reusable components:

• The Button component for rendering a button
• The Label component for rendering a text with a background color
• The Thumbnail component for rendering a small image

I’ve exported my components to Bit Cloud. Feel free to examine them, clone them into your own Bit workspace, or simply install them.

The reusable components above are combined under the <Container> component, which has the responsive layout style applied to it.

Now while the Container component works just fine, what if you could actually create the container without writing the CSS rules at all? What if you could describe your layout through some API props?

That is what Atomic Layout does for your React application. It allows you to have a smart component layout that you can control using concise, declarative API.

Atomic Layout will generate a styled container component that uses the CSS grid model under the hood, so you need to be familiar with the CSS grid model to use it.

Let’s see how Atomic Layout works next.

Getting started with Atomic Layout

If you want to create an example project in your computer, I’d recommend you use Create React App:

npx create-react-app react-atomic-example
cd react-atomic-example

First, you need to install the styled-components package, which is required by Atomic Layout to generate the CSS.

Install both styled-components and atomic-layout packages to your React project.

npm install styled-components atomic-layout

Once installed, you are ready to use Atomic Layout in your application. Let’s see how Atomic Layout can generate the same responsive card design above for you.

Atomic Layout props aliases

First, you need to import the Composition component from atomic-layout

import { Composition } from 'atomic-layout'

The Composition component is the only component that you need to use out of the atomic-layout library. You need to specify your component layout using this component.

The Composition component accepts props that will compile into single or multiple CSS properties, also known as prop aliases.

The list of props you can pass to the component is found in the listed props aliases here

For this example, you need to pass the areas prop where you can describe the grid-template-areas CSS property that’s going to be used by the component.

You can create the template area by using string literal as shown below:

const areas = `
  cover
  content
  actions
`

When you pass the areas literal above to Composition component, Atomic Layout will generate child components that you can use inside it.

Here’s an example of a Card component created using the Composition component:

import React from "react";
import { Composition } from "atomic-layout";const areas = `
  cover
  content
  actions
`;const Card = () => (
<Composition areas={areas}>
{(Areas) => (
<>
        <Areas.Cover>Our thumbnail</Areas.Thumbnail>
        <Areas.Content>Content</Areas.Content>
        <Areas.Actions>Call to action</Areas.Actions>
      </>
    )}
</Composition>
);export default Card;

You can try and run the above component to see Atomic Layout in action.

Now that you have the basic composition ready, let’s see how to make it responsive.

Atomic Layout responsive props

To make the Composition responsive, you can describe another layout and pass it again to the component under a different breakpoint.

Atomic Layout supports adding responsive props, where you pass one of the props aliases under a different breakpoint.

Composition supports five different breakpoints as shown below:

• xs (default) = <576px
• sm = ≥576px
• md = ≥768px
• lg = ≥992px
• xl = ≥1200px

For example, to create a layout used for tablets and desktops, then you can pass another template to the areasMd prop.

Here’s an example of multiple areas props passed to the Composition:

<Composition 
  areas={areas} 
  areasMd={areasMedium} 
  areasLg={areasLarge}>

Following the card design, then the medium layout may use the following template:

const areasMedium = `
  cover content
  cover actions
`

The template above will create a layout with two rows and two layouts where the cover component will expand and fill the first and second rows of the first column, while content and actions will be placed on the second column.

Finally, you only need to pass the areasMedium literal above to the areaMd prop of the Composition component:

<Composition areas={areas} areasMd={areasMedium}>

And that will be all you need to create the responsive layout.

You can try the following component in your project:

import React from "react";
import { Composition } from "atomic-layout";const areasMobile = `
  cover
  content
  actions
`;const areasTablet = `
  cover content
  cover actions
`const Card = () => (
  <Composition
areas={areasMobile}
    areasMd={areasTablet}
  >
    {({ Cover, Content, Actions }) => (
      <>
        <Cover>
          <p>Thumbnail image here</p>
        </Cover>
        <Content>
          <p>Label and price here</p>
        </Content>
        <Actions>
          <button>Click me!</button>
        </Actions>
      </>
    )}
  </Composition>
);export default Album;

The component above will use the tablet layout when the browser window width is 768px or larger. When the window is smaller, then the mobile layout will be used.

To finish the example, you need to add borders, gaps, paddings, and change the Composition display into inline.

The Composition component can render a custom wrapper component through the use of as prop.

You can pass a styled component as the wrapper of Composition component as follows:

const CardContainer = styled.div`
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
`;<Composition
as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
>

To change the Composition display into inline-grid, you need to pass the inline boolean prop to the component:

<Composition
inline
  as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
>

Finally, let’s add some gap and padding for the component as shown below:

<Composition
  inline
  as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
gap={20}
  gapMd={30}
  padding={32}>