Responsive Design

Build interfaces that adapt gracefully to any screen size. This guide covers breakpoints, fluid layouts, responsive components, and mobile-first strategies.

Overview

The Everforth Design System uses a mobile-first approach. We design for smaller screens first, then progressively enhance for larger viewports. This ensures a solid foundation that works everywhere.

Breakpoints

Our breakpoint system is based on common device sizes and content needs:

TokenSizeTarget Devices

--df-breakpoint-xs0 - 479pxSmall phones

--df-breakpoint-sm480 - 767pxLarge phones, small tablets

--df-breakpoint-md768 - 1023pxTablets, small laptops

--df-breakpoint-lg1024 - 1279pxLaptops, desktops

--df-breakpoint-xl1280 - 1535pxLarge desktops

--df-breakpoint-2xl1536px+Extra large screens

Using Breakpoints in CSS

// Mobile-first approach (recommended)
.component {
  padding: var(--df-spacing-sm);

  @media (min-width: 768px) {
    padding: var(--df-spacing-md);
  }

  @media (min-width: 1024px) {
    padding: var(--df-spacing-lg);
  }
}

// Using CSS custom properties
.component {
  max-width: var(--df-breakpoint-lg);
  margin: 0 auto;
}

SCSS Mixins

// Breakpoint mixins for convenience
@mixin breakpoint-up($size) {
  @if $size == sm {
    @media (min-width: 480px) { @content; }
  } @else if $size == md {
    @media (min-width: 768px) { @content; }
  } @else if $size == lg {
    @media (min-width: 1024px) { @content; }
  } @else if $size == xl {
    @media (min-width: 1280px) { @content; }
  } @else if $size == 2xl {
    @media (min-width: 1536px) { @content; }
  }
}

// Usage
.component {
  font-size: 14px;

  @include breakpoint-up(md) {
    font-size: 16px;
  }
}

Layout Strategies

Container Widths

Use containers to constrain content width:

<div class="df-container">
  <!-- Content is centered with max-width -->
</div>

<div class="df-container df-container--sm">
  <!-- Narrower container for reading content -->
</div>

<div class="df-container df-container--fluid">
  <!-- Full-width with padding -->
</div>

Container	Max Width	Use Case
Default	1280px	General page content
Small	768px	Blog posts, documentation
Large	1536px	Data-heavy interfaces
Fluid	100%	Full-bleed layouts

Grid System

Our 12-column grid adapts across breakpoints:

<div class="df-grid">
  <div class="df-col-12 df-col-md-6 df-col-lg-4">
    <!-- Full width on mobile, half on tablet, third on desktop -->
  </div>
  <div class="df-col-12 df-col-md-6 df-col-lg-4">
    <!-- Responsive column -->
  </div>
  <div class="df-col-12 df-col-md-12 df-col-lg-4">
    <!-- Responsive column -->
  </div>
</div>

Flexbox Utilities

<!-- Stack on mobile, row on desktop -->
<div class="df-flex df-flex-col md:df-flex-row df-gap-md">
  <div class="df-flex-1">Item 1</div>
  <div class="df-flex-1">Item 2</div>
</div>

Responsive Typography

Typography scales fluidly between breakpoints:

Display36px60px

H128px40px

H224px32px

Body14px16px

Fluid Typography with clamp()

/* Smoothly scale between viewport sizes */
.heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* Everforth fluid type scale */
--df-font-size-display: clamp(2.25rem, 5vw + 1rem, 3.75rem);
--df-font-size-h1: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
--df-font-size-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);

Touch Targets

Ensure interactive elements are easy to tap:

32px

Too small

40px

Minimum

44px

Recommended

48px

Comfortable

Guidelines

• Minimum: 40px (WCAG requirement)
• Recommended: 44px (Apple HIG)
• Spacing: At least 8px between touch targets
• Thumb zone: Place primary actions within easy thumb reach

/* Ensure minimum touch target */
.df-button {
  min-height: 44px;
  min-width: 44px;
  padding: var(--df-spacing-sm) var(--df-spacing-md);
}

/* Increase tap area without changing visual size */
.df-link--touch {
  position: relative;
}

.df-link--touch::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

Responsive Patterns

Navigation

Mobile Navigation

Transform horizontal navigation into mobile-friendly patterns:

<!-- Desktop: Horizontal nav -->
<!-- Mobile: Hamburger menu or bottom tabs -->
<nav class="df-nav">
  <button class="df-nav__toggle md:df-hidden" aria-label="Menu">
    <!-- Hamburger icon -->
  </button>
  <ul class="df-nav__menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Tables

Responsive Tables

Handle data tables on small screens:

<!-- Option 1: Horizontal scroll -->
<div class="df-table-responsive">
  <table class="df-table">...</table>
</div>

<!-- Option 2: Stack on mobile -->
<table class="df-table df-table--stack">
  <tr>
    <td data-label="Name">John Doe</td>
    <td data-label="Email">john@example.com</td>
  </tr>
</table>

Cards

Card Layouts

Adapt card grids for different screen sizes:

.card-grid {
  display: grid;
  gap: var(--df-spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Images

<!-- Responsive images with art direction -->
<picture>
  <source media="(min-width: 1024px)" srcset="hero-large.jpg">
  <source media="(min-width: 640px)" srcset="hero-medium.jpg">
  <img src="hero-small.jpg" alt="Hero image">
</picture>

<!-- Fluid images -->
<img src="photo.jpg" alt="..." class="df-img-fluid">

.df-img-fluid {
  max-width: 100%;
  height: auto;
}

Testing Responsive Design

Device Testing Checklist

iPhone SE (375px) - smallest common phone

iPhone 14/15 (390px) - popular phone size

iPad (768px) - tablet breakpoint

iPad Pro (1024px) - large tablet

Laptop (1280px) - common desktop

Large monitor (1920px) - wide screens

Common Issues to Check

1. Text overflow - Long words or URLs breaking layout
2. Touch targets - Buttons and links too small on mobile
3. Horizontal scroll - Content wider than viewport
4. Hidden content - Important info hidden on mobile
5. Font legibility - Text too small to read
6. Image sizing - Images breaking out of containers

Browser DevTools

// Quick viewport logging
console.log(`Viewport: ${window.innerWidth}x${window.innerHeight}`);

// Listen for resize
window.addEventListener('resize', () => {
  console.log(`Viewport: ${window.innerWidth}x${window.innerHeight}`);
});