View on GitHub

Spacing

OUDS Web includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Margin and padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from none to jumbo. Classes include fixed values on zoom (using px).

Using the CSS Grid layout module? Consider using the gap utility instead.

Notation for fixed values

Spacing utilities that apply to all breakpoints, from 2xs to 3xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for 2xs and {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, xl, 2xl, and 3xl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

none - for classes that eliminate the margin or padding by setting it to $ouds-dimension-0, which is 0
smash - for classes that set the margin or padding to $ouds-dimension-25, which is 2px
shortest - for classes that set the margin or padding to $ouds-dimension-50, which is 4px
shorter - for classes that set the margin or padding to $ouds-dimension-100, which is 8px
short - for classes that set the margin or padding to $ouds-dimension-150, which is 12px
medium - for classes that set the margin or padding to $ouds-dimension-200, which is 16px
tall - for classes that set the margin or padding to $ouds-dimension-300, which is 24px
taller - for classes that set the margin or padding to $ouds-dimension-400, which is 32px
tallest - for classes that set the margin or padding to $ouds-dimension-500, which is 40px
spacious - for classes that set the margin or padding to $ouds-dimension-600, which is 48px
huge - for classes that set the margin or padding to $ouds-dimension-700, which is 56px
jumbo - for classes that set the margin or padding to $ouds-dimension-800, which is 64px
auto - for classes that set the margin to auto

(You can but shouldn’t add more sizes by adding entries to the $ouds-dimension-space-fixed Sass map variable.)

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .75
3 - (by default) for classes that set the margin or padding to $spacer * 1.5
4 - (by default) for classes that set the margin or padding to $spacer * 2.5
5 - (by default) for classes that set the margin or padding to $spacer * 3.5
auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Notation for scaled values

Spacing utilities that evolve across all breakpoints, from 2xs to 3xl, have no breakpoint abbreviation in them since they are auto-sufficient from a responsive point of view.

The classes are named using the format {property}{sides}-scaled-{size}.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

Size name	Size for mobile (`2xs` to `md`)	Size for tablet (`md` to `xl`)	Size for desktop (`xl` to `3xl` and above)
`none`	`0`	`0`	`0`
`smash`	`2px`	`4px`	`4px`
`shortest`	`4px`	`8px`	`8px`
`shorter`	`8px`	`12px`	`16px`
`short`	`12px`	`16px`	`24px`
`medium`	`16px`	`24px`	`32px`
`tall`	`24px`	`32px`	`40px`
`taller`	`32px`	`40px`	`48px`
`tallest`	`40px`	`48px`	`56px`
`spacious`	`48px`	`56px`	`64px`

(You can but shouldn’t add more sizes by adding entries to the $ouds-dimension-space-scaled Sass map variable.)

Examples

Here are some representative examples of these classes:

.mt-none {
  margin-top: $ouds-space-fixed-none !important;
}

.ms-scaled-tall {
  margin-left: var(--bs-space-scaled-tall) !important;
}

.px-scaled-shortest {
  padding-right: var(--bs-space-scaled-shortest) !important;
  padding-left: var(--bs-space-scaled-shortest) !important;
}

.p-tallest {
  padding: $ouds-space-fixed-tall !important;
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

The first two examples show the scaled and fixed margin classes in action. The last one shows how to recreate an equivalent of .mx-scaled-tall by combining other responsive margin classes.

Please note that if you mix the scaled and fixed classes, the fixed classes will override the scaled ones.

Tall scaled x margin

Tall x margin (fixed)

Tall scaled x margin (manually)

<div class="mx-scaled-tall">Tall scaled x margin</div>
<div class="mx-tall">Tall x margin (fixed)</div>
<div class="mx-tall mx-md-taller mx-xl-tallest">Tall scaled x margin (manually)</div>

html

Horizontal centering

Additionally, OUDS Web also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

<div class="mx-auto p-short" style="width: 200px;">
  Centered element
</div>

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). These negative margins are disabled by default, but can be enabled in Sass by setting $enable-negative-margins: true.

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here are some example classes that are the opposite of .mt-short and .ms-scaled-tall:

.mt-nshort {
  margin-top: -$ouds-space-fixed-short !important;
}

.ms-scaled-ntall {
  margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important;
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Here’s an example class that’s the opposite of .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Gap

When using display: grid or display: flex, you can make use of gap utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the $ouds-dimension-space-fixed Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-tall">
  <div class="p-short">Grid item 1</div>
  <div class="p-short">Grid item 2</div>
  <div class="p-short">Grid item 3</div>
  <div class="p-short">Grid item 4</div>
</div>

html

Support includes responsive options for all of OUDS Web’s grid breakpoints, as well as sizes from the $ouds-dimension-space-fixed map (none–jumbo). There is no .gap-auto utility class as it’s effectively the same as .gap-none.

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

Support includes responsive options for all of OUDS Web’s grid breakpoints, as well as six sizes from the $spacers map (0–5). There is no .gap-auto utility class as it’s effectively the same as .gap-0.

row-gap

row-gap sets the vertical space between children items in the specified container.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-tall">
  <div class="p-short">Grid item 1</div>
  <div class="p-short">Grid item 2</div>
  <div class="p-short">Grid item 3</div>
  <div class="p-short">Grid item 4</div>
</div>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

column-gap

column-gap sets the horizontal space between children items in the specified container.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-tall">
  <div class="p-short">Grid item 1</div>
  <div class="p-short">Grid item 2</div>
  <div class="p-short">Grid item 3</div>
  <div class="p-short">Grid item 4</div>
</div>

html

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

html

Scaled gap

We also provide scaled versions of the gap (including row-gap and column-gap). These are generated via our Utilities API, based on the $ouds-dimension-space-scaled Sass map.

Grid item 1

Grid item 2

Grid item 3

Grid item 4

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-scaled-medium">
  <div class="p-short">Grid item 1</div>
  <div class="p-short">Grid item 2</div>
  <div class="p-short">Grid item 3</div>
  <div class="p-short">Grid item 4</div>
</div>

html

CSS

Variables

CSS variables that are used to build our scaled utilities.

scss/_root.scss

--#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile};
--#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-mobile};
--#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-mobile};
--#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-mobile};
--#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-mobile};
--#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-mobile};
--#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-mobile};
--#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-mobile};
--#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-mobile};
--#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-mobile};

@include media-breakpoint-up(md) {
  --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-tablet};
  --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-tablet};
  --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-tablet};
  --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-tablet};
  --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-tablet};
  --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-tablet};
  --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-tablet};
  --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-tablet};
  --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-tablet};
  --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-tablet};
}

@include media-breakpoint-up(xl) {
  --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-desktop};
  --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-desktop};
  --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-desktop};
  --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-desktop};
  --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-desktop};
  --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-desktop};
  --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-desktop};
  --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-desktop};
  --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-desktop};
  --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop};
}

Sass tokens

Raw tokens

Dimension raw tokens as Sass variables. Not to be used as-is.

scss/tokens/_raw.scss

$ouds-dimension-base: 4px;
$ouds-dimension-0: $ouds-dimension-base * 0; // 0
$ouds-dimension-25: $ouds-dimension-base * .5; // 2
$ouds-dimension-50: $ouds-dimension-base * 1; // 4
$ouds-dimension-75: $ouds-dimension-base * 1.5; // 6
$ouds-dimension-100: $ouds-dimension-base * 2; // 8
// $ouds-dimension-125: $ouds-dimension-base * 2.5; // 10
$ouds-dimension-150: $ouds-dimension-base * 3; // 12
$ouds-dimension-200: $ouds-dimension-base * 4; // 16
$ouds-dimension-250: $ouds-dimension-base * 5; // 20
$ouds-dimension-300: $ouds-dimension-base * 6; // 24
$ouds-dimension-350: $ouds-dimension-base * 7; // 28
$ouds-dimension-400: $ouds-dimension-base * 8; // 32
$ouds-dimension-450: $ouds-dimension-base * 9; // 36
$ouds-dimension-500: $ouds-dimension-base * 10; // 40
$ouds-dimension-550: $ouds-dimension-base * 11; // 44
$ouds-dimension-600: $ouds-dimension-base * 12; // 48
$ouds-dimension-650: $ouds-dimension-base * 13; // 52
$ouds-dimension-700: $ouds-dimension-base * 14; // 56
$ouds-dimension-750: $ouds-dimension-base * 15; // 60
$ouds-dimension-800: $ouds-dimension-base * 16; // 64
// $ouds-dimension-850: $ouds-dimension-base * 17; // 68
$ouds-dimension-900: $ouds-dimension-base * 18; // 72
$ouds-dimension-1000: $ouds-dimension-base * 20; // 80
$ouds-dimension-1200: $ouds-dimension-base * 24; // 96
$ouds-dimension-1400: $ouds-dimension-base * 28; // 112
$ouds-dimension-1600: $ouds-dimension-base * 32; // 128
$ouds-dimension-1800: $ouds-dimension-base * 36; // 144
// $ouds-dimension-2000: $ouds-dimension-base * 40; // 160
// $ouds-dimension-3000: $ouds-dimension-base * 80; // 320
$ouds-dimension-4000: $ouds-dimension-base * 120; // 480
// $ouds-dimension-5000: $ouds-dimension-base * 140; // 560
$ouds-dimension-6000: $ouds-dimension-base * 160; // 640
$ouds-dimension-7000: $ouds-dimension-base * 180; // 720
$ouds-dimension-9000: $ouds-dimension-base * 220; // 880
$ouds-dimension-11000: $ouds-dimension-base * 260; // 1040

Semantic tokens

Spacing semantic tokens are defined as Sass variables.

scss/tokens/_semantic.scss

$ouds-space-fixed-huge: $ouds-dimension-700;
$ouds-space-fixed-jumbo: $ouds-dimension-800;
$ouds-space-fixed-medium: $ouds-dimension-200;
$ouds-space-fixed-none: $ouds-dimension-0;
$ouds-space-fixed-short: $ouds-dimension-150;
$ouds-space-fixed-shorter: $ouds-dimension-100;
$ouds-space-fixed-shortest: $ouds-dimension-50;
$ouds-space-fixed-smash: $ouds-dimension-25;
$ouds-space-fixed-spacious: $ouds-dimension-600;
$ouds-space-fixed-tall: $ouds-dimension-300;
$ouds-space-fixed-taller: $ouds-dimension-400;
$ouds-space-fixed-tallest: $ouds-dimension-500;
$ouds-space-scaled-medium-desktop: $ouds-dimension-400;
$ouds-space-scaled-medium-mobile: $ouds-dimension-200;
$ouds-space-scaled-medium-tablet: $ouds-dimension-300;
$ouds-space-scaled-none-desktop: $ouds-dimension-0;
$ouds-space-scaled-none-mobile: $ouds-dimension-0;
$ouds-space-scaled-none-tablet: $ouds-dimension-0;
$ouds-space-scaled-short-desktop: $ouds-dimension-300;
$ouds-space-scaled-short-mobile: $ouds-dimension-150;
$ouds-space-scaled-short-tablet: $ouds-dimension-200;
$ouds-space-scaled-shorter-desktop: $ouds-dimension-200;
$ouds-space-scaled-shorter-mobile: $ouds-dimension-100;
$ouds-space-scaled-shorter-tablet: $ouds-dimension-150;
$ouds-space-scaled-shortest-desktop: $ouds-dimension-100;
$ouds-space-scaled-shortest-mobile: $ouds-dimension-50;
$ouds-space-scaled-shortest-tablet: $ouds-dimension-100;
$ouds-space-scaled-smash-desktop: $ouds-dimension-50;
$ouds-space-scaled-smash-mobile: $ouds-dimension-25;
$ouds-space-scaled-smash-tablet: $ouds-dimension-50;
$ouds-space-scaled-spacious-desktop: $ouds-dimension-800;
$ouds-space-scaled-spacious-mobile: $ouds-dimension-600;
$ouds-space-scaled-spacious-tablet: $ouds-dimension-700;
$ouds-space-scaled-tall-desktop: $ouds-dimension-500;
$ouds-space-scaled-tall-mobile: $ouds-dimension-300;
$ouds-space-scaled-tall-tablet: $ouds-dimension-400;
$ouds-space-scaled-taller-desktop: $ouds-dimension-600;
$ouds-space-scaled-taller-mobile: $ouds-dimension-400;
$ouds-space-scaled-taller-tablet: $ouds-dimension-500;
$ouds-space-scaled-tallest-desktop: $ouds-dimension-700;
$ouds-space-scaled-tallest-mobile: $ouds-dimension-500;
$ouds-space-scaled-tallest-tablet: $ouds-dimension-600;
$ouds-space-column-gap-medium: $ouds-dimension-6xs;
$ouds-space-column-gap-none: $ouds-dimension-none;
$ouds-space-column-gap-short: $ouds-dimension-7xs;
$ouds-space-column-gap-shorter: $ouds-dimension-8xs;
$ouds-space-column-gap-shortest: $ouds-dimension-9xs;
$ouds-space-column-gap-smash: $ouds-dimension-10xs;
$ouds-space-column-gap-tall: $ouds-dimension-5xs;
$ouds-space-column-gap-taller: $ouds-dimension-4xs;
$ouds-space-column-gap-tallest: $ouds-dimension-3xs;
$ouds-space-inset-medium: $ouds-dimension-6xs;
$ouds-space-inset-none: $ouds-dimension-none;
$ouds-space-inset-short: $ouds-dimension-7xs;
$ouds-space-inset-shorter: $ouds-dimension-8xs;
$ouds-space-inset-shortest: $ouds-dimension-9xs;
$ouds-space-inset-smash: $ouds-dimension-10xs;
$ouds-space-inset-spacious: $ouds-dimension-md;
$ouds-space-inset-tall: $ouds-dimension-5xs;
$ouds-space-inset-taller: $ouds-dimension-3xs;
$ouds-space-inset-tallest: $ouds-dimension-xs;
$ouds-space-padding-block-huge: $ouds-dimension-xs;
$ouds-space-padding-block-medium: $ouds-dimension-6xs;
$ouds-space-padding-block-none: $ouds-dimension-none;
$ouds-space-padding-block-short: $ouds-dimension-7xs;
$ouds-space-padding-block-shorter: $ouds-dimension-8xs;
$ouds-space-padding-block-shortest: $ouds-dimension-9xs;
$ouds-space-padding-block-smash: $ouds-dimension-10xs;
$ouds-space-padding-block-spacious: $ouds-dimension-2xs;
$ouds-space-padding-block-tall: $ouds-dimension-5xs;
$ouds-space-padding-block-taller: $ouds-dimension-4xs;
$ouds-space-padding-block-tallest: $ouds-dimension-3xs;
$ouds-space-padding-inline-huge: $ouds-dimension-xs;
$ouds-space-padding-inline-medium: $ouds-dimension-6xs;
$ouds-space-padding-inline-none: $ouds-dimension-none;
$ouds-space-padding-inline-short: $ouds-dimension-7xs;
$ouds-space-padding-inline-shorter: $ouds-dimension-8xs;
$ouds-space-padding-inline-shortest: $ouds-dimension-9xs;
$ouds-space-padding-inline-smash: $ouds-dimension-10xs;
$ouds-space-padding-inline-spacious: $ouds-dimension-2xs;
$ouds-space-padding-inline-tall: $ouds-dimension-5xs;
$ouds-space-padding-inline-taller: $ouds-dimension-4xs;
$ouds-space-padding-inline-tallest: $ouds-dimension-3xs;
$ouds-space-row-gap-medium: $ouds-dimension-6xs;
$ouds-space-row-gap-none: $ouds-dimension-none;
$ouds-space-row-gap-short: $ouds-dimension-7xs;
$ouds-space-row-gap-shorter: $ouds-dimension-8xs;
$ouds-space-row-gap-shortest: $ouds-dimension-9xs;
$ouds-space-row-gap-smash: $ouds-dimension-10xs;
$ouds-space-row-gap-tall: $ouds-dimension-5xs;

Sass variables

scss/_variables.scss

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .75, // OUDS mod: instead of `.5`
  3: $spacer * 1.5, // OUDS mod: instead of `1`
  4: $spacer * 2.5, // OUDS mod: instead of `1.5`
  5: $spacer * 3.5, // OUDS mod: instead of `3`
);

Sass maps

Spacing utilities are declared via Sass map and then generated with our utilities API.

scss/_maps.scss

$ouds-dimension-space-scaled: (
  "none": var(--#{$prefix}space-scaled-none),
  "smash": var(--#{$prefix}space-scaled-smash),
  "shortest": var(--#{$prefix}space-scaled-shortest),
  "shorter": var(--#{$prefix}space-scaled-shorter),
  "short": var(--#{$prefix}space-scaled-short),
  "medium": var(--#{$prefix}space-scaled-medium),
  "tall": var(--#{$prefix}space-scaled-tall),
  "taller": var(--#{$prefix}space-scaled-taller),
  "tallest": var(--#{$prefix}space-scaled-tallest),
  "spacious": var(--#{$prefix}space-scaled-spacious)
);

// stylelint-disable function-disallowed-list
$ouds-dimension-negative-space-scaled: (
  "nsmash": calc(-1 * var(--#{$prefix}space-scaled-smash)),
  "nshortest": calc(-1 * var(--#{$prefix}space-scaled-shortest)),
  "nshorter": calc(-1 * var(--#{$prefix}space-scaled-shorter)),
  "nshort": calc(-1 * var(--#{$prefix}space-scaled-short)),
  "nmedium": calc(-1 * var(--#{$prefix}space-scaled-medium)),
  "ntall": calc(-1 * var(--#{$prefix}space-scaled-tall)),
  "ntaller": calc(-1 * var(--#{$prefix}space-scaled-taller)),
  "ntallest": calc(-1 * var(--#{$prefix}space-scaled-tallest)),
  "nspacious": calc(-1 * var(--#{$prefix}space-scaled-spacious))
);
// stylelint-enable function-disallowed-list

$ouds-dimension-space-fixed: (
  "none": $ouds-space-fixed-none,
  "smash": $ouds-space-fixed-smash,
  "shortest": $ouds-space-fixed-shortest,
  "shorter": $ouds-space-fixed-shorter,
  "short": $ouds-space-fixed-short,
  "medium": $ouds-space-fixed-medium,
  "tall": $ouds-space-fixed-tall,
  "taller": $ouds-space-fixed-taller,
  "tallest": $ouds-space-fixed-tallest,
  "spacious": $ouds-space-fixed-spacious,
  "huge": $ouds-space-fixed-huge,
  "jumbo": $ouds-space-fixed-jumbo
);

$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null);

Sass utilities API

Spacing utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

// Scaled margin utilities
"margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-space-scaled
),
"margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-space-scaled
),
// Negative scaled margin utilities
"negative-margin-scaled-ouds": (
  property: margin,
  class: m-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-x-scaled-ouds": (
  property: margin-right margin-left,
  class: mx-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-y-scaled-ouds": (
  property: margin-top margin-bottom,
  class: my-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-top-scaled-ouds": (
  property: margin-top,
  class: mt-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-end-scaled-ouds": (
  property: margin-right,
  class: me-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-bottom-scaled-ouds": (
  property: margin-bottom,
  class: mb-scaled,
  values: $ouds-dimension-negative-space-scaled
),
"negative-margin-start-scaled-ouds": (
  property: margin-left,
  class: ms-scaled,
  values: $ouds-dimension-negative-space-scaled
),
// Fixed margin utilities
"margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
"margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($ouds-dimension-space-fixed, (auto: auto))
),
// Negative fixed margin utilities
"negative-margin-ouds": (
  responsive: true,
  property: margin,
  class: m,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-x-ouds": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-y-ouds": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-top-ouds": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-end-ouds": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-bottom-ouds": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $ouds-dimension-negative-space-fixed
),
"negative-margin-start-ouds": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $ouds-dimension-negative-space-fixed
),
// Padding utilities
"padding-scaled-ouds": (
  property: padding,
  class: p-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-x-scaled-ouds": (
  property: padding-right padding-left,
  class: px-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-y-scaled-ouds": (
  property: padding-top padding-bottom,
  class: py-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-top-scaled-ouds": (
  property: padding-top,
  class: pt-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-end-scaled-ouds": (
  property: padding-right,
  class: pe-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-bottom-scaled-ouds": (
  property: padding-bottom,
  class: pb-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-start-scaled-ouds": (
  property: padding-left,
  class: ps-scaled,
  values: $ouds-dimension-space-scaled
),
"padding-ouds": (
  responsive: true,
  property: padding,
  class: p,
  values: $ouds-dimension-space-fixed
),
"padding-x-ouds": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $ouds-dimension-space-fixed
),
"padding-y-ouds": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $ouds-dimension-space-fixed
),
"padding-top-ouds": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $ouds-dimension-space-fixed
),
"padding-end-ouds": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $ouds-dimension-space-fixed
),
"padding-bottom-ouds": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $ouds-dimension-space-fixed
),
"padding-start-ouds": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $ouds-dimension-space-fixed
),
// Gap utility
"gap-scaled-ouds": (
  property: gap,
  class: gap-scaled,
  values: $ouds-dimension-space-scaled
),
"row-gap-scaled-ouds": (
  property: row-gap,
  class: row-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"column-gap-scaled-ouds": (
  property: column-gap,
  class: column-gap-scaled,
  values: $ouds-dimension-space-scaled
),
"gap-ouds": (
  responsive: true,
  property: gap,
  class: gap,
  values: $ouds-dimension-space-fixed
),
"row-gap-ouds": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $ouds-dimension-space-fixed
),
"column-gap-ouds": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $ouds-dimension-space-fixed
),

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

scss/_utilities.scss

// Margin utilities
"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-ouds`
  bootstrap-compatibility: true
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-x-ouds`
  bootstrap-compatibility: true
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-y-ouds`
  bootstrap-compatibility: true
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-top-ouds`
  bootstrap-compatibility: true
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-end-ouds`
  bootstrap-compatibility: true
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-bottom-ouds`
  bootstrap-compatibility: true
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $spacers, // OUDS mod: `auto` value handled by `margin-start-ouds`
  bootstrap-compatibility: true
),
// Negative margin utilities
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers,
  bootstrap-compatibility: true
),
// Padding utilities
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers,
  bootstrap-compatibility: true
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers,
  bootstrap-compatibility: true
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers,
  bootstrap-compatibility: true
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers,
  bootstrap-compatibility: true
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers,
  bootstrap-compatibility: true
),

Spacing

On this page On this page

Margin and padding

Notation for fixed values

Notation for scaled values

Examples

Horizontal centering

Negative margin

Gap

row-gap

column-gap

Scaled gap

CSS

Variables

Sass tokens

Raw tokens

Semantic tokens

Sass variables

Sass maps

Sass utilities API

On this page