Spacing

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 5xlarge. Classes include fixed values on zoom (using px).

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 set the margin or padding to 0px
• 3xsmall - for classes that set the margin or padding to 2px
• 2xsmall - for classes that set the margin or padding to 4px
• xsmall - for classes that set the margin or padding to 8px
• small - for classes that set the margin or padding to 12px
• medium - for classes that set the margin or padding to 16px
• large - for classes that set the margin or padding to 24px
• xlarge - for classes that set the margin or padding to 32px
• 2xlarge - for classes that set the margin or padding to 40px
• 3xlarge - for classes that set the margin or padding to 48px
• 4xlarge - for classes that set the margin or padding to 56px
• 5xlarge - for classes that set the margin or padding to 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.)

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:

(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-large {
  margin-left: var(--bs-space-scaled-large) !important;
}

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

.p-2xlarge {
  padding: $ouds-space-fixed-2xlarge !important;
}

.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-lg 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.

<div class="mx-scaled-large">Large scaled x margin</div>
<div class="mx-large">Large x margin (fixed)</div>
<div class="mx-large mx-md-xlarge mx-xl-2xlarge">Large scaled x margin (manually)</div>

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.

<div class="mx-auto p-small" 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-small and .ms-scaled-large:

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

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

.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.

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

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

<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>

row-gap

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

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

<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>

column-gap

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

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

<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>

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.

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