Spacing

Set the spacing scale in the 📁 custom-style/_spacing.scss file.

The spacing scale is a modular scale of space values stored in CSS variables:

:root {
  --space-unit:  1em;
  --space-xxxxs: calc(0.125 * var(--space-unit)); 
  --space-xxxs:  calc(0.25 * var(--space-unit));
  --space-xxs:   calc(0.375 * var(--space-unit));
  --space-xs:    calc(0.5 * var(--space-unit));
  --space-sm:    calc(0.75 * var(--space-unit));
  --space-md:    calc(1.25 * var(--space-unit));
  --space-lg:    calc(2 * var(--space-unit));
  --space-xl:    calc(3.25 * var(--space-unit));
  --space-xxl:   calc(5.25 * var(--space-unit));
  --space-xxxl:  calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md);
}

You should use these values across your components anytime you set a spacing rule (e.g., margins and paddings):

.header__top {
  padding: var(--space-sm);
  text-align: center;
}

.header__main {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.header__nav {
  ul {
    display: flex;
  }

  li {
    margin-right: var(--space-md);

    &:last-child {
      margin-right: 0;
    }
  }
}

The spacing variables are also used in the margin and padding utility classes.

Responsive spacing #

If you edit the --space-unit variable at a specific breakpoint, all the spacing variables are affected because the --space-unit is injected in all of them.

@supports(--css: variables) { // control spacing responsiveness
  :root {
    @include breakpoint(md) {
      --space-unit:  1.25em;
    }
  }
}

⚠️ Important: we wrap the variable update at the md (medium) breakpoint into a @supports(--css: variables) rule to prevent the postcss-css-variables plugin from generating a fallback (Which, in this case, would result in a lot of extra code).

By editing the --space-unit value at specific breakpoints, together with the --text-base-size (body font size), you set global responsive rules that affect spacing and typography at the same time, with (almost) no need to use media queries on a component level. More info in our article 'An approach to responsive layouts based on CSS custom properties and em units'.

If you don't want the spacing to be affected by the font-size (due to the Em relative units), set the spacing unit equal to 1rem:

:root {
  --space-unit:  1rem;
  // ...
}

Edit space unit #

The spaceUnit mixin can be used to modify the CSS --space-unit variable on a component level. Pass to the mixin the value you wish to use as new --space-unit value for your component.

For example, you can use this mixin to switch from a spacing system based on em units (which is the default in CodyFrame) to one based on rem units:

.component {
  @include spaceUnit(1rem);
}

Utility classes #

For a full list of spacing utility classes, please refer to the Utilities page.