Spacing

Spacing variables

These can be found for reference in __vars/_spacing.scss, and should not be changed, they define the spacing across the entire site.

The map for the utilities classes is also defined here.

  $spacing-baseline: 1rem !default;

  $spacing-4xs: $spacing-baseline * 0.0625 !default;
  $spacing-3xs: $spacing-baseline * 0.125 !default;
  $spacing-2xs: $spacing-baseline * 0.25 !default;
  $spacing-xs: $spacing-baseline * 0.5 !default;
  $spacing-sm: $spacing-baseline * 0.75 !default;
  $spacing-md: $spacing-baseline !default;
  $spacing-lg: $spacing-baseline * 1.5 !default;
  $spacing-xl: $spacing-baseline * 2 !default;
  $spacing-2xl: $spacing-baseline * 2.5 !default;
  $spacing-3xl: $spacing-baseline * 3 !default;
  $spacing-4xl: $spacing-baseline * 4 !default;
  $spacing-5xl: $spacing-baseline * 6 !default;
  $spacing-6xl: $spacing-baseline * 8 !default;

You'll see them used liberally in Sass to keep consistency in spacing accross the site, for example, something like:

.element {
  margin: 0 0 $spacing-xl;
  padding: $spacing-md;
}

If helpful, don't be afraid to assign variables to variables to give them more meaning, for example:

$card__internal-spacing: $spacing-sm;

.card {
  margin: 0 0 $spacing-xl;
  padding: $card__internal-spacing;

  &__title {
    margin-bottom: $card__internal-spacing;
  }
}

Spacing utilities

We generate utility classes for layout-level spacing to help with vertical rhythm in content. Use sparingly, only where it isn't really possible to add margins in CSS.

To add margin top and bottom, use: margin-y-[size], eg. margin-y-md for medium spacing, .margin-y-lg for large spacing.

To add margin to bottom only, use: margin-bottom-[size], eg. margin-bottom-md for medium spacing.

To add margin to top only, use: margin-top-[size], eg. margin-top-md for medium spacing. This is normally an unlikely use case. Consider adding bottom margin to the layout block above instead.

$utils-margin-sizes: (
  '4xs':  $spacing-4xs,
  '3xs':  $spacing-3xs,
  '2xs':  $spacing-2xs,
  'xs':   $spacing-xs,
  'sm':   $spacing-sm,
  'md':   $spacing-md,
  'lg':   $spacing-lg,
  'xl':   $spacing-xl,
  '2xl':  $spacing-2xl,
  '3xl':  $spacing-3xl,
  '4xl':  $spacing-4xl,
  '5xl':  $spacing-5xl,
  '6xl':  $spacing-6xl,
)