🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

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

responsive spacing

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:

Class Description
.space-unit-rem --space-unit: 1rem;
.space-unit-em --space-unit: 1em;
.space-unit-px --space-unit: 16px;

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.

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.