Spacing

<h1 class="">Spacing</h1>

<h2>Spacing variables</h2>
<p>These can be found for reference in <code>__vars/_spacing.scss</code>, and <strong>should not be changed</strong>, they define the spacing across the entire site.</p>
<p>The map for the utilities classes is also defined here.</p>

<pre>
$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;
</pre>

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

<pre>.element {
  margin: 0 0 $spacing-xl;
  padding: $spacing-md;
}
</pre>

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

<pre>$card__internal-spacing: $spacing-sm;

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

  &__title {
    margin-bottom: $card__internal-spacing;
  }
}
</pre>

<h3>Spacing multiplier</h3>

<p>There is a consistent global 'spacing multiplier' defined for elements (like box/card) where it makes sense that spacing increases as the element becomes wider. This can be used either standalone or with <code>calc</code>.</p>
<p>A sensible default is set as the mixin <code>box__padding</code>, this can be included by <code>@include box__padding</code> in Sass and at time of delivery is:</p>
<pre>padding: calc(#{$spacing-sm} + #{$spacing-multiplier});</pre>

<h2>Spacing utilities</h2>
<p>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.</p>
<p>To add margin <strong>top and bottom</strong>, use: <code>margin-y-[size]</code>, eg. <code>margin-y-md</code> for medium spacing, <code>.margin-y-lg</code> for large spacing.</p>
<p>To add margin to <strong>bottom only</strong>, use: <code>margin-bottom-[size]</code>, eg. <code>margin-bottom-md</code> for medium spacing.</p>
<p>To add margin to <strong>top only</strong>, use: <code>margin-top-[size]</code>, eg. <code>margin-top-md</code> for medium spacing. This is normally an unlikely use case. Consider adding bottom margin to the layout block above instead.</p>

<pre>$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,
)</pre>