Spacing

Spacing utilities and SASS variables allow you to quickly set an element’s margin or padding to defined values that align with the Phenotypes modular scale.

Responsive classes

Responsive class utilities are provided for as well, following this format:

.[property][sides][size]-[breakpoint]
  • property is m or p for margin or padding, respectively
  • sides (optional) is one of:
    • t, b, l, or r for top/bottom/left/right
    • x or y for horizontal/vertical
    • omitted for all sides
  • size is a number from 0 to 9 (corresponding to the variables above)
  • breakpoint is an optional responsive breakpoint (sm, md, lg, xl)

Special cases:

  • Margin auto values follow the pattern .m[x,y]-auto-[breakpoint]
  • Negative spacing helpers for x-axis: .mxn[size]-[breakpoint]

Examples:

  • .mb4.mb5-md adds 16px margin-bottom for xs up, and 24px for md up
  • .py1 adds 5px padding-top and padding-bottom

SASS variables

Sass variable Space
$spacer-0 0
$spacer-1 5px
$spacer-2 7px
$spacer-3 11px
$spacer-4 16px
$spacer-5 24px
$spacer-6 36px
$spacer-7 53px
$spacer-8 79px
$spacer-9 119px

Etc.

Note: this feature is enabled by default and adds 1,835 lines of CSS (approx 42kb) to the compiled CSS. You can toggle it off by setting $enable-spacing-utilities: false before importing Phenotypes.

Adapted from Bootstrap 4.

Related:

<div>
    <p><code class="text-color-hint">.p3.p4-sm.p5-md.p6-lg.p7-xl.m3.m4-sm.m5-md.m6-lg.m7-xl</code>
    </p>
    <h4 style="background:#232323;" class="text-color-reversed-primary p3 p4-sm p5-md p6-lg p7-xl m3 m4-sm m5-md m6-lg m7-xl h6 h5-sm h4-md h3-lg h2-xl"><span role="img" aria-label="rocket">🚀</span> I’m going to space (resize me)</h4>
</div>
import * as React from 'react';

function SpacingUtilities() {
  return (
    <div>
      <p>
        <code className="text-color-hint">
          .p3.p4-sm.p5-md.p6-lg.p7-xl.m3.m4-sm.m5-md.m6-lg.m7-xl
        </code>
      </p>
      <h4
        style={{ background: '#232323' }}
        className="text-color-reversed-primary p3 p4-sm p5-md p6-lg p7-xl m3 m4-sm m5-md m6-lg
                   m7-xl h6 h5-sm h4-md h3-lg h2-xl"
      >
        <span role="img" aria-label="rocket">
          🚀
        </span>{' '}
        I’m going to space (resize me)
      </h4>
    </div>
  );
}
export default SpacingUtilities;
/* No context defined for this component. */
  • Content:
    // ------------------------------
    // Responsive spacing utilities
    // ------------------------------
    //
    // Based on Bootstrap 4
    // https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_spacing.scss
    //
    // scss-lint:disable ImportantRule
    // scss-lint:disable SpaceBeforeBrace
    // scss-lint:disable SpaceAfterPropertyColon
    
    @if $enable-spacing-utilities {
      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $suffix: breakpoint-suffix($breakpoint, $grid-breakpoints);
    
          @each $prop, $abbrev in (margin: m, padding: p) {
            @for $i from 1 through length($spacers) {
              $size: $i - 1;
              $length: nth($spacers, $i);
    
              // e.g. m3-sm
              .#{$abbrev}#{$size}#{$suffix}  { #{$prop}:        $length !important; }
    
              // e.g. mt3-sm
              .#{$abbrev}t#{$size}#{$suffix} { #{$prop}-top:    $length !important; }
              .#{$abbrev}r#{$size}#{$suffix} { #{$prop}-right:  $length !important; }
              .#{$abbrev}b#{$size}#{$suffix} { #{$prop}-bottom: $length !important; }
              .#{$abbrev}l#{$size}#{$suffix} { #{$prop}-left:   $length !important; }
    
              // e.g. mx3-sm
              .#{$abbrev}x#{$size}#{$suffix} {
                #{$prop}-right: $length !important;
                #{$prop}-left:  $length !important;
              }
    
              @if $abbrev == 'm' {  // negation only applicable for margin
                @if $size != 0 { // don't need -0px margins
                  // e.g. mt3-sm
                  .#{$abbrev}tn#{$size}#{$suffix} { #{$prop}-top:    -$length !important; }
                  .#{$abbrev}rn#{$size}#{$suffix} { #{$prop}-right:  -$length !important; }
                  .#{$abbrev}bn#{$size}#{$suffix} { #{$prop}-bottom: -$length !important; }
                  .#{$abbrev}ln#{$size}#{$suffix} { #{$prop}-left:   -$length !important; }
    
                  // e.g. mxn3-sm
                  .#{$abbrev}xn#{$size}#{$suffix} {
                    #{$prop}-right: -$length !important;
                    #{$prop}-left:  -$length !important;
                  }
                }
              }
    
              // e.g. my3-sm
              .#{$abbrev}y#{$size}#{$suffix} {
                #{$prop}-top:    $length !important;
                #{$prop}-bottom: $length !important;
              }
            }
          }
    
          // Margin auto utils
          .m-auto#{$suffix}  { margin:        auto !important; }
          .mt-auto#{$suffix} { margin-top:    auto !important; }
          .mr-auto#{$suffix} { margin-right:  auto !important; }
          .mb-auto#{$suffix} { margin-bottom: auto !important; }
          .ml-auto#{$suffix} { margin-left:   auto !important; }
    
          .mx-auto#{$suffix} {
            margin-left:  auto !important;
            margin-right: auto !important;
          }
    
          .my-auto#{$suffix} {
            margin-bottom: auto !important;
            margin-top:    auto !important;
          }
        }
      }
    }
    
  • URL: /components/raw/spacing/_spacing.scss
  • Filesystem Path: library/utilities/spacing/_spacing.scss
  • Size: 2.8 KB