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. Spacing visual editor
6. Utility classes

Spacing Scale #

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

:root {
  --space-unit:  1em;
}

:root, * {
  --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:

<div class="margin-bottom-md padding-sm [email protected]">
  <!-- ... -->
</div>

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
  @include breakpoint(md) {
    :root {
      --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'.

Change Spacing Unit #

By default, CodyFrame uses Em units for the spacing. However, you can update the --space-unit value in the 📁 custom-style/_spacing.scss file:

:root {
  --space-unit:  1rem; // 👈 [1/2]
}

:root, * {
  --space-xxxxs: calc(0.125 * var(--space-unit)); 
  // ...
  --component-padding: var(--space-md);
}

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

In the example above, the spacing system is based on Rem units, and, unlike a spacing system based on Em units, it's no longer affected by the font-size values.

Optionally, you can update the --space-unit on a component level:

// example 1 - switch component spacing to Rem units
.component {
  --space-unit: 1rem;
}

// example 2 - increase the spacing of the component
.component {
  --space-unit: 1.25em;
}

You can also use one of CodyFrame's space-unit utility classes:

Example:

<div class="dropdown space-unit-rem">
  <!-- this component's spacing uses Rem units -->
</div> 

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:

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

// starting from CodyFrame v2.8.0, the spaceUnit mixin is equivalent to 👇
.component {
  --space-unit: 1rem;
}

Spacing Editor #

Use the spacing visual editor to generate a spacing scale and set responsive rules, then copy the exported code into CodyFrame's 📁 custom-style/_spacing.scss file.

Utility Classes #

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