Skip to main content

​
Overview

Natours includes a set of utility classes defined in sass/base/_utilities.scss for common styling patterns like text alignment and spacing. These single-purpose classes follow a utility-first approach and use !important to ensure they override component-specific styles.
All utility classes are prefixed with u- to clearly distinguish them from component classes and prevent naming collisions.

​
Text Alignment

​
Center Text

Center-align text content within its container.
sass/base/_utilities.scss
.u-center-text { 
  text-align: center !important; 
}
Usage Example: 
<div class="u-center-text">
  <h2 class="heading-secondary">Centered Heading</h2>
  <p class="paragraph">This text is centered.</p>
</div>
Use .u-center-text on section containers to center all child text elements at once.

​
Margin Utilities

Natours provides a comprehensive set of margin utilities for both bottom and top spacing in four size variations.

​
Margin Bottom

Add consistent bottom spacing to elements.
sass/base/_utilities.scss
.u-margin-bottom-small { margin-bottom: 1.5rem !important; }
.u-margin-bottom-medium { margin-bottom: 4rem !important; }
.u-margin-bottom-big { margin-bottom: 8rem !important; }
.u-margin-bottom-huge { margin-bottom: 10rem !important; }

Small

1.5rem (15px)Tight spacing between related elements

Medium

4rem (40px)Standard spacing between components

Big

8rem (80px)Large spacing between sections

Huge

10rem (100px)Maximum spacing for major section breaks
Usage Examples: 
<h3 class="heading-tertiary u-margin-bottom-small">
  Component Title
</h3>
<p class="paragraph">
  Tight spacing between heading and paragraph.
</p>
Use Case: Related elements that should appear closely grouped

​
Margin Top

Add consistent top spacing to elements.
sass/base/_utilities.scss
.u-margin-top-small { margin-top: 1.5rem !important; }
.u-margin-top-medium { margin-top: 4rem !important; }
.u-margin-top-big { margin-top: 8rem !important; }
.u-margin-top-huge { margin-top: 10rem !important; }
Top margin utilities use the same size scale as bottom margins:
  • Small: 1.5rem (15px)
  • Medium: 4rem (40px)
  • Big: 8rem (80px)
  • Huge: 10rem (100px)
Usage Example: 
<div class="text-box">
  <p class="paragraph">First paragraph.</p>
  <p class="paragraph u-margin-top-medium">Second paragraph with extra top spacing.</p>
</div>
Top margin utilities are less commonly used than bottom margins. Prefer bottom margins for vertical rhythm, and use top margins only when you need to push an element down from its sibling.

​
Spacing Scale

Natours follows a consistent spacing scale across all utilities:
SizeValueUse Case
Small1.5rem (15px)Tight spacing, related elements
Medium4rem (40px)Component spacing, standard gaps
Big8rem (80px)Section spacing, major breaks
Huge10rem (100px)Maximum spacing, page sections
This spacing scale matches the vertical gutter system ($gutter-vertical: 8rem) for consistent rhythm throughout the design.

​
Using !important

All utility classes use !important to ensure they override component-specific styles: 
.u-center-text { text-align: center !important; }

​
Why !important?

1

Override Specificity

Utilities need to work regardless of component specificity:
<div class="section section--dark u-center-text">
  <!-- Text will be centered even if .section has text-align rules -->
</div>
2

Guarantee Behavior

Developers should be confident that adding a utility class will have the expected effect
3

Single Purpose

Each utility does one thing and does it reliably
While !important is appropriate for utilities, avoid using it in component styles. Keep !important usage limited to the utility classes.

​
Real-World Examples

​
Section Header

Combining text alignment and spacing utilities: 
<section class="section-about">
  <div class="u-center-text u-margin-bottom-big">
    <h2 class="heading-secondary">
      Exciting tours for adventurous people
    </h2>
  </div>
  
  <div class="row">
    <!-- Section content -->
  </div>
</section>
Result:
  • Heading is centered
  • Large bottom margin creates space before the content grid

​
Feature Box Grid

Using margin utilities for vertical rhythm: 
<div class="row">
  <div class="col-1-of-4">
    <div class="feature-box u-margin-bottom-medium">
      <i class="feature-box__icon">🗺️</i>
      <h3 class="heading-tertiary u-margin-bottom-small">Explore</h3>
      <p class="feature-box__text">Discover amazing places</p>
    </div>
  </div>
  
  <!-- More feature boxes -->
</div>
Result:
  • Medium spacing between feature boxes
  • Small spacing between heading and description

​
Content Sections

Creating visual hierarchy with consistent spacing: 
<main>
  <section class="section-about u-margin-bottom-huge">
    <h2 class="heading-secondary u-margin-bottom-big">
      About Our Tours
    </h2>
    <!-- About content -->
  </section>
  
  <section class="section-features u-margin-bottom-huge">
    <h2 class="heading-secondary u-margin-bottom-big">
      Our Features
    </h2>
    <!-- Features content -->
  </section>
  
  <section class="section-tours">
    <h2 class="heading-secondary u-margin-bottom-big">
      Most Popular Tours
    </h2>
    <!-- Tours content -->
  </section>
</main>
Result:
  • Huge spacing between major sections
  • Big spacing between section headings and content
  • Consistent vertical rhythm throughout the page

​
Utility-First Approach

Natours uses a hybrid approach combining component classes with utility classes: 
// Component handles structure and specific styling
.feature-box {
  background-color: $color-white;
  padding: 2.5rem;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
}

​
Benefits

Flexibility

Adjust spacing without modifying component styles

Consistency

Use the same spacing scale across all components

Maintainability

Update spacing globally by changing utility values

Reusability

Combine utilities in different ways for various layouts

​
Best Practices

1

Use Utilities for Spacing

Let components handle their internal styling, and use utilities for external spacing:
<!-- ✅ Good -->
<div class="card u-margin-bottom-big">
  <h3 class="card__title u-margin-bottom-small">Title</h3>
</div>

<!-- ❌ Bad - spacing in component -->
<div class="card card--with-big-margin">
  <h3 class="card__title">Title</h3>
</div>
2

Choose the Right Size

Match spacing to the visual hierarchy:
  • Small: Tightly related elements (heading + description)
  • Medium: Component spacing (between cards)
  • Big: Section spacing (between major blocks)
  • Huge: Page-level spacing (between major sections)
3

Combine with Component Classes

Use utilities alongside component classes:
<section class="section-features u-center-text u-margin-bottom-huge">
  <!-- section-features: component styling -->
  <!-- u-center-text: text alignment -->
  <!-- u-margin-bottom-huge: external spacing -->
</section>
4

Prefer Bottom Margins

Use bottom margins for vertical rhythm instead of top margins when possible:
<!-- ✅ Good -->
<h2 class="heading-secondary u-margin-bottom-big">Title</h2>
<p class="paragraph">Content</p>

<!-- ❌ Less ideal -->
<h2 class="heading-secondary">Title</h2>
<p class="paragraph u-margin-top-big">Content</p>

​
Complete Utility Reference

All available utility classes from sass/base/_utilities.scss:
sass/base/_utilities.scss
.u-center-text { text-align: center !important; }

.u-margin-bottom-small { margin-bottom: 1.5rem !important; }
.u-margin-bottom-medium { margin-bottom: 4rem !important; }
.u-margin-bottom-big { margin-bottom: 8rem !important; }
.u-margin-bottom-huge { margin-bottom: 10rem !important; }

.u-margin-top-small { margin-top: 1.5rem !important; }
.u-margin-top-medium { margin-top: 4rem !important; }
.u-margin-top-big { margin-top: 8rem !important; }
.u-margin-top-huge { margin-top: 10rem !important; }
This is a minimal but effective set of utilities. As the project grows, you can add more utilities following the same naming convention: .u-{property}-{value}.

Build docs developers (and LLMs) love

Get started for freeTalk to us