Spacing

The fluid spacing values below are used in calc() formulas, which calculate the right value for the particular viewport width vw. You can safely customize them and instantly preview the result without writing a single additional line of HTML code or diving deep into the CSS of a particular section.

Distance Presets

The distance presets used throughout the template are defined as CSS variables in 📄 css/main.css under the :root selector.

/* Distances */
:root {
  /* Fluid paddings & margins (min values) */
  --distance-min-xxsmall: 20;
  --distance-min-xsmall: 30;
  --distance-min-small: 40;
  --distance-min-medium: 40;
  --distance-min-large: 50;
  --distance-min-xlarge: 90;

  /* Fluid paddings & margins (max values) */
  --distance-max-xxsmall: 30;
  --distance-max-xsmall: 40;
  --distance-max-small: 80;
  --distance-max-medium: 120;
  --distance-max-large: 180;
  --distance-max-xlarge: 240;

  /* Container & page gutters */
  --gutter-horizontal-min: 20;
  --gutter-horizontal-max: 120;
  --gutter-vertical-min: 20;
  --gutter-vertical-max: 80;

  /* Bootstrap */
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

From 360px (Screen resolution of an average smartphone)

The minimum value with the distance-min-* prefix defines the actual spacing in pixels for the smallest screen sizes down to 360px.

To 1920px (Full HD resolution)

The maximum value with the distance-max-* prefix defines the actual spacing in pixels for the largest screen sizes up to 1920px.

Helper Classes

Use the following class naming pattern to apply margin or padding to an element:

.[Padding | Margin][X | Y | Top | Right | Bottom | Left]-[xxsmall | xsmall | small | medium | large | xlarge]

Examples:

<!-- Fluid Padding Top: Medium -->
<div class="pt-medium">
  ...
</div>

<!-- Fluid Margin on Y axis (top + bottom): Small -->
<section class="section my-small">
  ...
</section>

<!-- Fluid Padding on all sides (top + right + left + bottom): XSmall -->
<div class="m-xsmall">
  ...
</div>

<!-- Fluid Margin on X axis (left + right): Large -->
<section class="mx-large">
  ...
</section>

<!-- Fluid Padding on the end side (right): Medium -->
<div class="pe-large">
  ...
</div>

<!-- Fluid Margin on the start side (left): XSmall -->
<div class="ms-xsmall">
  ...
</div>

Negative Offsets

The naming convention is the same as for fluid margins. Just add *-minus-* in the middle. By setting a negative margin on an element, you're pulling the sibling element in the opposite direction.

Examples:

<!-- Negative Fluid Top Margin: Medium -->
<div class="mt-minus-medium">
  ...
</div>

<!-- Negative Fluid Bottom Margin: XLarge -->
<div class="mb-minus-xlarge">
  ...
</div>