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.

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:

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.