Spacing

The 📁 base/_spacing.scss file contains the spacing scale, while the 📁 custom-style/_spacing.scss file is where you can (optionally) modify the space unit at specific breakpoints to make the whole spacing system responsive.

The spacing scale is a modular scale of 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). More info on how to use CSS custom properties on the Framework page.

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

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 for the CodyHouse framework) to one based on rem units:

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