Spacing

We recommend using our Layout components to control spacing of and between elements. The exported components and mixins have our allowed spacing scale values baked-in for more consistently spaced UIs.

Size scale

We can apply spacing to individual sides (top, right, bottom, left), or vertical and horizontal sides, as either margin or padding. In version 4.0.0 of our theme we updated our spacing scale to a more standard 16pt based scale.

All our spacing scales are defined in rem and below table provide the equivalent value in px.

Ways to apply spacing

Below are different ways provided by Mesh to apply spacing—using the above size scale—to your design. They include the padding and margin props using the Box component, the space props as part of our other layout components or via the use of mixin utilities.

Layout components

Layout components are Mesh components that control spacing between elements. They abstract away the logic and provide a user-friendly and intuitive set of props to achieve accurate and flexible spacing for a number of layout designs.

For more information on Layout components, see our Layout docs.

Box component

The Box component acts as a container and accepts props for standard spacing. Combine padding and margin for sizing flexibility.

<>
  <Box background="lightest" display="inline-block" padding={8} marginRight={4}>
    Box 1
  </Box>
  <Box background="lightest" display="inline-block" paddingVertical={6} marginRight={6}>
    Box 2
  </Box>
  <Box background="lightest" display="inline-block" paddingRight={4} paddingBottom={6}>
    Box 3
  </Box>
  <Box background="lightest" display="inline-block" padding={6} marginLeft={4}>
    Box 4
  </Box>
</>

Stack and Inline components

Layout components such as Stack and Inline allow for consistent control over the vertical white space between elements. They allow you to apply a standard spacing size between direct children. Spacing can be responsive and layout components can be nested.

<Stack space={{xs: 4, md: 6}}>
  <div>
    <Stack space={2}>
      <Heading size={3}>Heading</Heading>
      <Copy>Lorem ipsum dolor sit amet.</Copy>
    </Stack>
  </div>
  <Divider />
  <div>
    <Inline space={4}>
      <SmallPlaceholder>Item 1</SmallPlaceholder>
      <SmallPlaceholder>Item 2</SmallPlaceholder>
    </Inline>
  </div>
</Stack>

Mixins

In general, you should use the layout components over mixins. However, there are instances where spacing needs to be controlled in a more intricate way.

Padding mixins

import {p, pt, pr, pb, pl, px, py, pbs, pie, pbe, pis, pbl, pi} from '@nib/layout';

const Example1 = styled.div`
  ${p(4)};
`;

const Example2 = styled(Box)`
  ${pt(1)};
  ${pr(6)};
  ${pb(3)};
  ${pl(5)};
`;

const Example3 = styled.div`
  ${px(6)};
  ${py(4)};
`;

const Example4 = styled.div`
  ${pbl(6)};
  ${pi(4)};
`;

const Example5 = styled(Box)`
  ${pbs(1)};
  ${pie(6)};
  ${pbe(3)};
  ${pis(5)};
`;

Margin mixins

import {m, mt, mr, mb, ml, mx, my, mbs, mie, mbe, mis, mbl, mi} from '@nib/layout';

const Example1 = styled.div`
  ${m(4)};
`;

const Example2 = styled(Box)`
  ${mt(1)};
  ${mr(6)};
  ${mb(3)};
  ${ml(5)};
`;

const Example3 = styled.div`
  ${mx(6)};
  ${my(4)};
`;

const Example4 = styled(Box)`
  ${mbs(1)};
  ${mie(6)};
  ${mbe(3)};
  ${mis(5)};
`;

const Example5 = styled.div`
  ${mbl(6)};
  ${mi(4)};
`;

token function

Since v7.0.0 of the theme, and the introduction of design tokens, the spacing scale sources its values from tokens. This means that you can also use the token function to access the spacing values.

import {token} from '@nib-components/theme';

const Example1 = styled.div`
  padding: ${token('common.dimension.spacing.4')};
`;

Logical Properties

Logical properties and values in CSS provide a powerful way to control layout and style based on the flow of content. Unlike traditional physical properties (such as margin-top or padding-left), logical properties adapt to different writing modes (horizontal or vertical) and text directions (left-to-right or right-to-left). This makes CSS more flexible and easier to internationalize.

Along with the existing options for margin and padding, we have added mixins and props to the Box that are explicitly logical:

• Mixins: mbs, mie, mbe, mis, mbl, mi, pbs, pie, pbe, pis, pbl and pi
• Props: marginBlockStart, marginInlineEnd, marginBlockEnd, marginInlineStart, marginBlock, marginInline, paddingBlockStart, paddingInlineEnd, paddingBlockEnd, paddingInlineStart, paddingBlock and paddingInline

Since theme v7, the existing mixins and spacing props are already using their logical property equivalents under the covers. However, we feel it is important to make this explicit to shift the way we think and talk about spacing in our codebases. The existing mixins and props will continue to work but will eventually be deprecated in a later major release. It is recommended to use the new mixins and props instead.