Spacing

Description

A series of utilities for responsive spacing and gutter spacing, covering margin, padding, top/left/right/bottom, inset/inset-x/inset-y and gap/row-gap/column-gap.

v1.1.0 adds logical properties:

• margin-inline-start/ms- (MDN)
• margin-inline-end/me- (MDN)
• padding-inline-start/ps- (MDN)
• padding-inline-end/pe- (MDN)
• inset-inline-start/start (MDN)
• inset-inline-end/end (MDN)

Setup

In addition to the required $structure map (Setup), you should add a $spacing map to your _tokens.scss, with the following format:

$spacing: (
  outer-1: (
    xs: 64px,
    lg: 96px
  ),
  inner-1: (
    xs: 24px,
    md: 40px,
    lg: 64px
  ),
  inner-2: (
    xs: 16px,
    md: 24px,
    lg: 32px
  )
);

Output

Responsive spacing group classes

Responsive spacing classes, for each of the responsive spacing groups.
For example, looking at $outer-1:

$spacing: (
  outer-1: (
    xs: 64px,
    lg: 96px
  ),
);

First we would get :root variables:

:root {
  --SPACING_VARs: "at this breakpoint ↓";
  --spacing-outer-1: 4rem;
}

@media screen and (min-width: 544px) {
  :root {
    --SPACING_VARs: "at this breakpoint ↓";
    --spacing-outer-1: 4rem;
  }
}
@media screen and (min-width: 650px) {
  :root {
    --SPACING_VARs: "at this breakpoint ↓";
    --spacing-outer-1: 4rem;
  }
}
@media screen and (min-width: 990px) {
  :root {
    --SPACING_VARs: "at this breakpoint ↓";
    --spacing-outer-1: 6rem;
  }
}
@media screen and (min-width: 1300px) {
  :root {
    --SPACING_VARs: "at this breakpoint ↓";
    --spacing-outer-1: 6rem;
  }
}
@media screen and (min-width: 1520px) {
  :root {
    --SPACING_VARs: "at this breakpoint ↓";
    --spacing-outer-1: 6rem;
  }
}

Then the corresponding placeholder and CSS classes:

And negative classes where applicable:

As each of these points to a CSS variable and so you can override per element if required.

Gutter spacing classes

Also generated are utility placeholders and CSS classes for inner gutter and outer gutters:

Demo

The following "box" has responsive spacing margin and internal padding classes, if you resize your browser you'll see the spacing alters.

<div class="mt-outer-1 p-inner-1 bg-accent">
  <div class="p-inner-2 bg-primary">
    <p>box</p>
  </div>
</div>

Gutter classes can be used to insert gutter sized spacing:

<div class="py-inner-2 bg-accent" style="display: flex; flex-flow: row nowrap;">
  <div class="colspan-1 mr-gutter bg-primary" style="padding: 5px;">
    <p>box</p>
  </div>
  <div class="bg-primary" style="padding: 5px;">
    <p>box</p>
  </div>
</div>

Notes

As you can see, this generates a lot of CSS classes - you will want to purge your CSS of unused classes to remove any of these that you don't use.

Alternatively, if you don't want to generate the CSS classes, see CSS-Class-Generation.

You maybe wondering why we don't also generate spacing classes linked to rem values such as those within Tailwind. When writing SCSS to style your components, you would place any none non systemised spacing inside your SCSS files. Though you may choose to use the systemised responsive spacing classes in your HTML, they can help debugging as its clear which spacing group is being applied.