Kinsey

# Spacing

The fluid spacing values below are used in calc() formulas to 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.

# Space Presets

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

:root {
  ...
  /* Bootstrap */
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
  /* Fluid paddings & margins (min values) */
  --distance-min-xsmall: 30;
  --distance-min-small: 40;
  --distance-min-medium: 50;
  --distance-min-large: 50;
  --distance-min-xlarge: 90;
  /* Fluid paddings & margins (max values) */
  --distance-max-xsmall: 60;
  --distance-max-small: 80;
  --distance-max-medium: 100;
  --distance-max-large: 160;
  --distance-max-xlarge: 240;
  /* Container & page gutters */
  --gutter-horizontal: 120px;
  --gutter-vertical: 100px;
  ...
}

# From 320px (iPhone SE screen resolution)

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

# To 1920px (Full HD resolution)

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

# Helper Classes

# Fluid Spacing

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

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

Examples:

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

<!-- Fluid Margin Vertical (Top + Bottom): Small -->
<section class="section my-small">
  ...
</section>

<!-- Fluid Padding All Sides (Top + Right + Left + Bottom): XSmall -->
<div class="m-xsmall">
  ...
</div>

<!-- Fluid Margin Horizontal (Left + Right): Large -->
<section class="mx-large">
  ...
</section>

# Negative Offsets

.offset_[top | bottom]

Use the following markup guide to create a content offset inside a section:

<!-- 1. Base Structure -->
<section class="section section-offset">
  <div class="section-offset__content">
    ...
  </div>
</section>

<!-- 2. Use "offset_top" or "offset_bottom" to define the offset direction -->
<section class="section section-offset offset_bottom">
  <div class="section-offset__content">
    ...
  </div>
</section>

<!-- 3. Add background color, top padding classes -->
<section class="section section-offset offset_bottom bg-dark-2 pt-large">
  <div class="section-offset__content">
    ...
  </div>
</section>

You can check a live example of the offset on this page: 📄 035-about.html at the first content & image section.

← Template Options →