🎉 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:  1rem;
}

: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;
    gap: var(--space-md);
  }
}

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.5625rem;
    }
  }
}

The result is a global responsive rule that allows you to affect all the spacing with one variable, with (almost) no need to use media queries on a component level.

responsive spacing

Change spacing unit #

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

:root {
  --space-unit:  1em; // 👈 [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.25em; // 👈 [2/2]
    }
  }
}

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

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

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

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-em">
  <!-- this component's spacing uses Em 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(1em);
}

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

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.