Breakpoints

Responsive breakpoints for mobile-first design.

Responsive Breakpoints

#

Foundation CSS uses a mobile-first approach with three breakpoints that cover all device sizes. All utility classes support responsive prefixes.

Breakpoint Prefix Min Width Target Devices
Default - 0px All devices (mobile-first)
Small sm: 600px Tablets
Medium md: 1008px Desktops
Large lg: 1280px Large desktops

Usage

<!-- Mobile-first: block by default, flex on tablet, grid on desktop -->
<div class="d-block md:d-flex lg:d-grid">
  <!-- Content -->
</div>

<!-- Responsive grid columns -->
<div class="d-grid grid__1 sm:grid__2 md:grid__3 g4">
  <!-- 1 col mobile, 2 cols tablet, 3 cols desktop -->
</div>

<!-- Responsive spacing -->
<div class="p2 md:p4 lg:p6">
  <!-- Smaller padding on mobile, larger on tablet/desktop -->
</div>

💡 Mobile-First Approach

Foundation CSS uses min-width media queries, meaning styles cascade upward:

  • Base styles apply to all screen sizes
  • sm: overrides apply from 600px and up
  • md: overrides apply from 1008px and up
  • lg: overrides apply from 1280px and up

Customization

SCSS Variables

Breakpoints are defined as SCSS variables. You can use them in your custom styles or override them: 

@use "@enodo/foundation-css/variables/breakpoints" as *;

/* Use in media queries */
@use "sass:map";

@media (min-width: map.get($breakpoints, md)) {
  .my-component {
    padding: var(--su6);
  }
}

/* Or override before importing */
@use "@enodo/foundation-css" with (
  $breakpoints: (
    sm: 600px,
    md: 1008px,
    lg: 1280px,
  )
);

Best Practices

#

Do

  • Start with mobile styles (no prefix)
  • Add complexity as screen size increases
  • Test on real devices when possible
  • Use semantic breakpoints (sm, md, lg, xl)

Don't

  • Design for desktop first
  • Create custom breakpoints for every device
  • Rely solely on breakpoints for responsiveness
  • Forget to test on mobile devices