CSS Spacing Utilities

spacing-utilities.css

@import "../variables/_spacing.css";

/*
* SPACING UTILITIES
*
* Utilities for setting padding and margin.
*
* Legend:
*
* Rules:
*  p - padding
*  m - margin
*
* Directions:
*  t - top
*  r - right
*  b - bottom
*  l - left
*  v - vertical
*  h - horizontal
*  [none] - all (e.g: `.u-p-sm`)
*
* Magnitudes:
*  0 = `0`
*  auto = `auto` (https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values)
*  xs = "xs" step in spacing scale
*  sm = "sm" step in spacing scale
*  md = "md" step in spacing scale
*  lg = "lg" step in spacing scale
*  xl = "xl" step in spacing scale
*
*  E.g: `.u-pt-sm` = set padding-top to the value associated with `var(--spacing-sm)`
*/


/* --------------- PADDING --------------- */

.u-p-0 { padding: 0 !important; }
.u-p-auto { padding: auto !important; }
.u-p-xs { padding: var(--spacing-xs) !important; }
.u-p-sm { padding: var(--spacing-sm) !important; }
.u-p-md { padding: var(--spacing-md) !important; }
.u-p-lg { padding: var(--spacing-lg) !important; }
.u-p-xl { padding: var(--spacing-xl) !important; }


.u-pt-0 { padding-top: 0 !important; }
.u-pt-auto { padding-top: auto !important; }
.u-pt-xs { padding-top: var(--spacing-xs) !important; }
.u-pt-sm { padding-top: var(--spacing-sm) !important; }
.u-pt-md { padding-top: var(--spacing-md) !important; }
.u-pt-lg { padding-top: var(--spacing-lg) !important; }
.u-pt-xl { padding-top: var(--spacing-xl) !important; }


.u-pr-0 { padding-right: 0 !important; }
.u-pr-auto { padding-right: auto !important; }
.u-pr-xs { padding-right: var(--spacing-xs) !important; }
.u-pr-sm { padding-right: var(--spacing-sm) !important; }
.u-pr-md { padding-right: var(--spacing-md) !important; }
.u-pr-lg { padding-right: var(--spacing-lg) !important; }
.u-pr-xl { padding-right: var(--spacing-xl) !important; }


.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-auto { padding-bottom: auto !important; }
.u-pb-xs { padding-bottom: var(--spacing-xs) !important; }
.u-pb-sm { padding-bottom: var(--spacing-sm) !important; }
.u-pb-md { padding-bottom: var(--spacing-md) !important; }
.u-pb-lg { padding-bottom: var(--spacing-lg) !important; }
.u-pb-xl { padding-bottom: var(--spacing-xl) !important; }


.u-pl-0 { padding-left: 0 !important; }
.u-pl-auto { padding-left: auto !important; }
.u-pl-xs { padding-left: var(--spacing-xs) !important; }
.u-pl-sm { padding-left: var(--spacing-sm) !important; }
.u-pl-md { padding-left: var(--spacing-md) !important; }
.u-pl-lg { padding-left: var(--spacing-lg) !important; }
.u-pl-xl { padding-left: var(--spacing-xl) !important; }


.u-ph-0 { padding-left: 0 !important; padding-right: 0 !important; }
.u-ph-auto { padding-left: auto !important; padding-right: auto !important; }
.u-ph-xs { padding-left: var(--spacing-xs) !important; padding-right: var(--spacing-xs) !important; }
.u-ph-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.u-ph-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.u-ph-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.u-ph-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }


.u-pv-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-pv-auto { padding-top: auto !important; padding-bottom: auto !important; }
.u-pv-xs { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.u-pv-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.u-pv-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.u-pv-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.u-pv-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }


/* --------------- MARGIN --------------- */

.u-m-0 { margin: 0 !important; }
.u-m-auto { margin: auto !important; }
.u-m-xs { margin: var(--spacing-xs) !important; }
.u-m-sm { margin: var(--spacing-sm) !important; }
.u-m-md { margin: var(--spacing-md) !important; }
.u-m-lg { margin: var(--spacing-lg) !important; }
.u-m-xl { margin: var(--spacing-xl) !important; }


.u-mt-0 { margin-top: 0 !important; }
.u-mt-auto { margin-top: auto !important; }
.u-mt-xs { margin-top: var(--spacing-xs) !important; }
.u-mt-sm { margin-top: var(--spacing-sm) !important; }
.u-mt-md { margin-top: var(--spacing-md) !important; }
.u-mt-lg { margin-top: var(--spacing-lg) !important; }
.u-mt-xl { margin-top: var(--spacing-xl) !important; }


.u-mr-0 { margin-right: 0 !important; }
.u-mr-auto { margin-right: auto !important; }
.u-mr-xs { margin-right: var(--spacing-xs) !important; }
.u-mr-sm { margin-right: var(--spacing-sm) !important; }
.u-mr-md { margin-right: var(--spacing-md) !important; }
.u-mr-lg { margin-right: var(--spacing-lg) !important; }
.u-mr-xl { margin-right: var(--spacing-xl) !important; }


.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-auto { margin-bottom: auto !important; }
.u-mb-xs { margin-bottom: var(--spacing-xs) !important; }
.u-mb-sm { margin-bottom: var(--spacing-sm) !important; }
.u-mb-md { margin-bottom: var(--spacing-md) !important; }
.u-mb-lg { margin-bottom: var(--spacing-lg) !important; }
.u-mb-xl { margin-bottom: var(--spacing-xl) !important; }


.u-ml-0 { margin-left: 0 !important; }
.u-ml-auto { margin-left: auto !important; }
.u-ml-xs { margin-left: var(--spacing-xs) !important; }
.u-ml-sm { margin-left: var(--spacing-sm) !important; }
.u-ml-md { margin-left: var(--spacing-md) !important; }
.u-ml-lg { margin-left: var(--spacing-lg) !important; }
.u-ml-xl { margin-left: var(--spacing-xl) !important; }


.u-mh-0 { margin-left: 0 !important; margin-right: 0 !important; }
.u-mh-auto { margin-left: auto !important; margin-right: auto !important; }
.u-mh-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.u-mh-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.u-mh-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.u-mh-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.u-mh-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }


.u-mv-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.u-mv-auto { margin-top: auto !important; margin-bottom: auto !important; }
.u-mv-xs { margin-top: var(--spacing-xs) !important; margin-bottom: var(--spacing-xs) !important; }
.u-mv-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.u-mv-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.u-mv-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.u-mv-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }

spacing-variables.css

:root {

  --base-spacing-unit: 1rem;
  --common-ratio: 2;

  /* ---------------- SPACING SCALE ---------------- */

  /**
   *
   * 1) Set the "sm" value relative to
   * our base spacing unit.
   *
   * 2) Backtrack initially to set values
   * below the base.
   *
   * 3) Move forward on the scale, deriving each
   * new value from the product of the previous
   * setting and the common ratio.
   */

  /* 1 */

  --spacing-sm: calc(var(--base-spacing-unit));

  /* 2 */

  --spacing-xs: calc(
    var(--spacing-sm) /
    var(--common-ratio)
  );

  --spacing-md: calc(
    var(--spacing-sm) *
    var(--common-ratio)
  );

  /* 3 */

  --spacing-lg: calc(
    var(--spacing-md) *
    var(--common-ratio)
  );

  --spacing-xl: calc(
    var(--spacing-lg) *
    var(--common-ratio)
  );

  --spacing-xxl: calc(
    var(--spacing-xl) *
    var(--common-ratio)
  );


  /* ---------------- CONCEPTUAL VARIABLES ---------------- */

  --spacing-inset-default: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-md);

  /**
   * INSETS
   *
   * 1) Squared indent spacing: Compresses content on all four sides
   * (think of the inner framing for a photo on the wall)
   *
   * 2) Squished indent spacing: Reduces top and bottom space by 50%.
   * Useful for buttons and cell-like containers such
   * as a data table row or a list item.
   *
   * 3) Stretched indent spacing: Extra vertical spacing.
   * Useful for elements whose size is prown to grown vertically (such
   * as a textarea) or elements that are commonly blocks in a
   * vertical flow (such as text field for any other form element)
   */

  /* 1 */

  --spacing-inset-xs: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
  --spacing-inset-sm: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
  --spacing-inset-md: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-md);
  --spacing-inset-lg: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
  --spacing-inset-xl: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);

  /* 2 */

  --spacing-inset-squish-sm:
    calc(var(--spacing-sm) / 2)
    var(--spacing-sm)
    calc(var(--spacing-sm) / 2)
    var(--spacing-sm);

  --spacing-inset-squish-md:
    calc(var(--spacing-md) / 2)
    var(--spacing-md)
    calc(var(--spacing-md) / 2)
    var(--spacing-md);

  --spacing-inset-squish-lg:
    calc(var(--spacing-lg) / 2)
    var(--spacing-lg)
    calc(var(--spacing-lg) / 2)
    var(--spacing-lg);

  /* 3 */

  --spacing-inset-stretch-sm:
    calc(var(--spacing-sm) * 1.5)
    var(--spacing-sm)
    calc(var(--spacing-sm) * 1.5)
    var(--spacing-sm);

  --spacing-inset-stretch-md:
    calc(var(--spacing-md) * 1.5)
    var(--spacing-md)
    calc(var(--spacing-md) * 1.5)
    var(--spacing-md);

  /**
   * STACKING
   *
   * Helpers for the different spacing values comprising
   * that comprise a vertical rythm: stacked copy, stacked
   * pills, stacked toolbars, stacked headings on form fields, etc.
   */
  --spacing-stack-xs: 0 0 var(--spacing-xs) 0;
  --spacing-stack-sm: 0 0 var(--spacing-sm) 0;
  --spacing-stack-md: 0 0 var(--spacing-md) 0;
  --spacing-stack-lg: 0 0 var(--spacing-lg) 0;
  --spacing-stack-xl: 0 0 var(--spacing-xl) 0;
}