Rhye

# Fluid Spacing

The fluid spacing values below are used in calc() formulas to calculate the right value for a 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 {
  ...
  /* fluid paddings & margins (min values) */
  --distance-min-xsmall: 30;
  --distance-min-small: 30;
  --distance-min-medium: 50;
  --distance-min-large: 100;
  --distance-min-xlarge: 160;
  /* fluid paddings & margins (max values) */
  --distance-max-xsmall: 50;
  --distance-max-small: 120;
  --distance-max-normal: 240;
  --distance-max-large: 360;
  --distance-max-xlarge: 400;
  /* container & page gutters */
  --gutter-horizontal: 120px;
  --gutter-vertical: 80px;
  ...
}

# 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 2560px (iMac or LG Ultrafine 5k Display screen resolution)

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

# 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>

# Responsive em Spacing

Use the following class naming pattern to apply margin or padding to an element based on em value:

.[Padding | Margin][X | Y | Top | Right | Bottom | Left]-[ | sm | md]-[0...6]

Examples:

<!-- Padding Left: 1em -->
<div class="pl-1">
  ...
</div>

<!-- Margin Top: 2em, Margin Right: 3em -->
<div class="mt-2 mr-3">
  ...
</div>

<!-- Padding Top (mobile screens): 0em, Padding Top (medium screens): 2em -->
<div class="pt-0 pt-md-2">
  ...
</div>

<!-- Margin Vertical (Top + Bottom) (mobile screens): 1em, Margin Vertical (Top + Bottom) (tablet screens): 2em, Margin Vertical (Top + Bottom) (medium screens): 3em -->
<div class="my-1 my-sm-2 my-md-3">
  ...
</div>

# 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, bottom margin classes -->
<section class="section section-offset offset_bottom bg-dark-2 pt-medium mb-medium">
  <div class="section-offset__content">
    ...
  </div>
</section>

You can check a live example of the offset on this page 📄 project-details-6-bottom-fullwidth.html in the "Commercial Reel" section.

← Template Options →