Mobile-First Design with Sass

Mobile-first styling begins with a layout suitable for smaller viewports and adds enhancements as more space becomes available. This approach encourages a usable baseline and avoids unnecessarily complex overrides.

Sass can centralize breakpoint tokens and provide mixins that make media-query usage consistent. Breakpoints should reflect where the content or layout stops working well, rather than being chosen only to match specific device names.

A responsive design should consider more than width. Accessibility, touch targets, readable typography, overflow, orientation, and user preferences can all influence the final CSS.

Mobile-First Card Grid

$tablet: 48rem;
$desktop: 72rem;

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: $tablet) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: $desktop) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

💡 The baseline uses one column. At the tablet breakpoint, the grid expands to two columns; at the desktop breakpoint, it expands to three. The minmax(0, 1fr) pattern allows grid tracks to shrink below their intrinsic minimum size, helping prevent long content from forcing unexpected overflow.

Knowledge Check

What is the defining characteristic of a mobile-first stylesheet?

Mobile-First Design with Sass

STAY UPDATED WITH BYTES!