Breakpoints

The breakpoint module keeps track of the height, width and resolution breakpoints where a responsive design needs to change in order to respond to different devices being used to view the site. The breakpoint module standardises the use of breakpoints, and enables modules and themes to expose or use each others' breakpoints. The core module does not have a user interface. The breakpoints are stored inside a {module-or-theme}.breakpoints.yml file.

The change record can be found here: Breakpoint added to Drupal 8

Breakpoints configuration

Both themes and modules can define breakpoints by creating a configuration file called {name}.breakpoints.yml where {name} is the name of your theme or module.

To get a good example, let's take a look at bartik.breakpoints.yml:

bartik.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Each breakpoint has it's own identifier. Bartik has 3 unique breakpoints: mobile, narrow and wide. Each breakpoint is defined as {module or theme name}.{label}, with bartik.mobile as an example. The name of the module or theme is used to make sure the identifier is unique. This way, modules can include breakpoints from each other.

label

Human readable label for breakpoint. It should be unique within a module or theme.

mediaQuery

The media query for the breakpoint.

weight

Weight used for ordering breakpoints.

multipliers

Breakpoint multipliers. Multipliers are a measure of the viewport's device resolution, defined as the ratio between the physical pixel size of the active device and the device-independent pixel size. The breakpoint module defines multipliers of 1, 1.5 and 2. When defining breakpoints, modules and themes can define which multipliers apply to each breakpoint.