Spacing

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

🔍 On this page:

1. Spacing scale
2. Responsive spacing
3. How to change the spacing unit
4. spaceUnit mixin
5. Utility classes

Spacing scale #

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

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;
  // ...
}

Change the spacing unit #

By default, CodyFrame uses Em units for the spacing. To change your the spacing unit in your project, update the --space-unit value in the 📁 custom-style/_spacing.scss file:

:root {
  --space-unit:  1rem; // 👈
  --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);
}

@supports(--css: variables) {
  :root {
    @include breakpoint(md) {
      --space-unit:  1.25rem; // 👈
    }
  }
}

spaceUnit mixin #

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.