Creating the Stack layout primitive component using Styled System

Artem Sapegin
InstructorArtem Sapegin

Share this video with your friends

Send Tweet
Published a year ago
Updated 10 months ago

In this lesson we’ll create the fourth layout primitive component — Stack, that will allow us (together with the Box, Flex and Grid components from the previous lesson) to create almost any complex layout without writing any custom CSS. We’ll use Styled System to create this component.

Stack component is a layout primitive to create stacking — adding equal spacing between each child of a container, and it’s one of the most useful layout primitives. Stack is based on the Box component, and adds spacing between the container children.

We can use it like this:

<Stack gap={3}>
  <Box>eins</Box>
  <Box>zwei</Box>
  <Box>polizei</Box>
</Stack>

This will create three <div>s stacked one on top of the other with a 8 pixels (third step in our spacing scale) gap.

The implementation is based on the lobotomized owl CSS selector:

.stack * + * {
  margin-top: 8px;
}

Here we’re adding a top margin to each container child except the first one, so we’re creating whitespace between the children but not around the container.

To define the gap prop — the spacing between the container children — we'll use the system function from styled-system, that allows us to create custom props.

The Stack implementation in this lesson is slightly simplified one, have a look at a more flexible Stack component that supports vertical and horizontal stacking, and switching direction based on the viewport width.

We’ll use following libraries:

You can either use this lesson’s Git repository or install them manually in your project:

npm install styled-components styled-system

Useful links and documentation:

Artem Sapegin: [0:00] Let's create a new markdown file, Stack.md, and add some usage examples. Our Stack component is going to have a gap prop, which is going to receive a spacing value from origin file, and it will define a spacing between its children.

[0:13] Let's create a new component file, Stack.js and start styleguidist. Import styled-components. Import system function from 'styled-system'. Import the Box component, and create a new styled component, Stack, based on the Box component, and export it.

[0:32] Let's call the system function referring the Gap prop, but instead of CSS property we're going to pass a CSS selector. We're using the lobotomized owl selector to add top margin to all children except the first one. We are going to have a spacing between the children, but not around the container.

[0:49] We're using && to increase the selector specificity and to write any marker element might you already have. We're using the spacing scale from origin file. We are using the transform function to generate the CSS. It accepts value and scale, and we're going to return CSS code for marginTop for the given spacing value.

[1:10] Let's also define some prop-types. We use propTypes from the Box component, because Stack accepts all the props from the Box component and define the gap prop which is a number or an array of numbers.