Breakpoints

Breakpoints are customizable sizes that create responsive layout or determine behavior based on the viewport width.

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.

Breakpoint Class stub Pixel Dimension Em Dimension
Extra Small None <576px <36em
Small sm ≥576px ≥36em
Medium md ≥768px ≥48em
Large lg ≥992px ≥62em
Extra large xl ≥1200px ≥75em

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.

PX vs EM Controversy

While this is a very opinionated topic, Figuration has chosen the em route for greater accessibility. We believe strongly that this is the correct direction moving forward.

Some reference material - may be competing points of view:

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.

Right aligned text on all viewport sizes. (No xs class designation!)

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

<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

Why subtract .02em? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision. The 0.2em translates into a fractional pixel value.

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.

Name Type Default Description
$grid-breakpoints map
(
    xs: 0,
    sm: bp-to-em(576px),
    md: bp-to-em(768px),
    lg: bp-to-em(992px),
    xl: bp-to-em(1200px)
);
Mapping of breakpoint names to their minimum widths.

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)
Argument Type Default Description
$name string '' Name of a breakpoint.
$breakpoints map $grid-breakpoints Map of breakpoints sizes to use in creating the media query.

media-breakpoint-down

Create max-width media query for a given breakpoint.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
Argument Type Default Description
$name string '' Name of a breakpoint.
$breakpoints map $grid-breakpoints Map of breakpoints sizes to use in creating the media query.

media-breakpoint-only

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

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
Argument Type Default Description
$name string '' Name of a breakpoint.
$breakpoints map $grid-breakpoints Map of breakpoints sizes to use in creating the media query.

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)
Argument Type Default Description
$lower string '' Name of a breakpoint for the lower boundary (min-width).
$upper string '' Name of a breakpoint for the upper boundary (max-width).
$breakpoints map $grid-breakpoints Map of breakpoints sizes to use in creating the media query.