Breakpoints

Available Breakpoints

Figuration includes five default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you are using our source Sass files.

Breakpoints are representative of a subset of common device sizes and viewport dimensions—they do not target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

These breakpoints are defined by the $grid-breakpoints Sass map in _settings.scss.

$grid-breakpoints: (
    xs: 0,
    sm: bp-to-em(576px),
    md: bp-to-em(768px),
    lg: bp-to-em(992px),
    xl: bp-to-em(1200px)
);

For accessibility reasons, the Sass internally maps the pixel defined breakpoints into em values. We assume a 16px default root font size, since this is the default for most browsers.

Breakpoint Nomenclature

Since Figuration is developed to be mobile first by default, we have created our class naming structure to not use the smallest breakpoint designation, except for a few certain instances. However, this is configurable for custom builds by overriding $enable-bp-smallest option referenced in the Global Options settings.

Classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

Building from the base component or utility name, most classes are named using the format .base-{direction}-{dimension} for xs and .base-{breakpoint}-{direction}-{dimension} for sm, md, lg, and xl. In the case of some utilites that have abbreviated names, such as the spacing utilities, the format is .abbr{direction}-{breakpoint}-{dimension}.

The only special case is where there are *-up or *-down variants for certain components or classes, the breakpoint designation. Only then is the minimum breakpoint designation used in the class name.

A quick example using some of Figuration's Typography utility classes.

<p class="text-end">Right aligned text on all viewport sizes. (<strong>No <code>xs</code> class designation!</strong>)</p>
<p class="text-sm-end">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">Right aligned text on viewports sized XL (extra-large) or wider.</p>

Responsive Breakpoints

Figuration uses a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

min-width

Figuration primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

Since we write our source CSS in Sass, all our media queries are available via Sass mixins.

// No media query needed since the `xs` breakpoint is effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}

@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

When compiled these mixins will output media queries based on the values defined in the $grid-breakpoints map.

// Extra small devices (portrait phones, less than 36em/576px)
// No media query for `xs` since this is the default in Figuration

// Small devices (landscape phones, 36em/576px and up)
@media (min-width: 36em) { ... }

// Medium devices (tablets, 48em/768px and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em/992px and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em/1200px and up)
@media (min-width: 75em) { ... }

max-width

We occasionally need to use media queries that go in the other direction (the given screen size or smaller):

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query since the `xl` breakpoint has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

These Sass mixins compile out as max-width media queries that subtract 0.2em from the defined breakpoint values.

// Extra small devices (portrait phones, less than 36em/576px)
@media (max-width: 35.98em) { ... }

// Small devices (landscape phones, less than 48em/768px)
@media (max-width: 47.98em) { ... }

// Medium devices (tablets, less than 62em/992px)
@media (max-width: 61.98em) { ... }

// Large devices (desktops, less than 75em/1200px)
@media (max-width: 74.98em) { ... }

// Extra large devices (large desktops)
// No media query since the `xl` breakpoint has no upper bound on its width

Single Breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

When compiled the following media queries are generated.

// Extra small devices
@media (max-width: 35.98em) { ... }

// Small devices
@media (min-width: 36em) and (max-width: 47.98em) { ... }

// Medium devices
@media (min-width: 48em) and (max-width: 61.98em) { ... }

// Large devices
@media (min-width: 62em) and (max-width: 74.98em) { ... }

// Extra large devices
@media (min-width: 75em) { ... }

Multiple Breakpoints

Similarly, media queries may span multiple breakpoint widths:

@include media-breakpoint-between(sm, lg) { ... }

Resulting in:

// Example
// Starting with small devices, up to and including large devices
@media (min-width: 36em) and (max-width: 74.98em) { ... }

Sass Reference

Variables

The available Customization options, or Sass variables, that can be customized for breakpoints.

(
    xs: 0,
    sm: bp-to-em(576px),
    md: bp-to-em(768px),
    lg: bp-to-em(992px),
    xl: bp-to-em(1200px)
);

Mixins

Here are the mixins related to alerts that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

media-breakpoint-up

Create min-width media query for a given breakpoint.

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

media-breakpoint-down

Create max-width media query for a given breakpoint.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

media-breakpoint-only

Create a 'ranged' media query containing only the boundaries for the given breakpoint.

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

media-breakpoint-between

Create a 'ranged' media query containing the lower and upper boundaries for the given breakpoints.

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)