Breakpoints in breakpoints.yml should increase in weight as they increase in size

Weights in breakpoints.yml

Within breakpoints.yml, breakpoints should be ordered from the smallest media to query to the largest media query. Small media queries should have a lower weight (the first breakpoint should be 0 for example), while larger media queries should have larger weights (the fourth breakpoint should be 3 for example).

Toolbar breakpoints

Before

Breakpoints for the Toolbar module were previously ordered from the smallest size to the largest size, but the weight decreased as the size increased.

toolbar.narrow:
  label: narrow
  mediaQuery: 'only screen and (min-width: 16.5em)'
  weight: 2
  multipliers:
    - 1x
toolbar.standard:
  label: standard
  mediaQuery: 'only screen and (min-width: 38.125em)'
  weight: 1
  multipliers:
    - 1x
toolbar.wide:
  label: wide
  mediaQuery: 'only screen and (min-width: 61em)'
  weight: 0
  multipliers:
    - 1x

After

Now in Toolbar the smallest size breakpoints have a smaller weight and weight increases with the size of the mediaQuery.

toolbar.narrow:
  label: narrow
  mediaQuery: 'only screen and (min-width: 16.5em)'
  weight: 0
  multipliers:
    - 1x
toolbar.standard:
  label: standard
  mediaQuery: 'only screen and (min-width: 38.125em)'
  weight: 1
  multipliers:
    - 1x
toolbar.wide:
  label: wide
  mediaQuery: 'only screen and (min-width: 61em)'
  weight: 2
  multipliers:
    - 1x

Summary

Ordering weights from smallest to largest viewport sizes matches best practices for how to order breakpoints within CSS. Provide properties for the smallest viewports without any media queries, so even browsers that don't understand media queries can display mobile styles, then make additional challenges with min-width media queries for larger and larger viewports. All media queries that match the viewport size will apply the enclosed CSS rules, so larger viewport sizes media queries typically override smaller viewport size media queries.

Theme breakpoints

Before

#2260061: Responsive image module does not support sizes/picture polyfill 2.2 changed the order of breakpoints in themes so that smaller breakpoints had larger weights and thus breakpoints would be ordered from largest to smallest when used with responsive images, which is how the picture element needs media queries ordered to function correctly. The following example is from Bartik, after #2260061: Responsive image module does not support sizes/picture polyfill 2.2.

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 2
  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: 0
  multipliers:
    - 1x

After

That resulted in an inconsistency in how breakpoint weights should be assigned, based on whether the breakpoints would be used in either Toolbar module or the Responsive Images module. Now the theme breakpoints also have smaller weight assigned to smaller size media queries.

bartik.mobile:
  label: mobile
  mediaQuery: ''
  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

Summary

With responsive images the first media query to apply (in the sources of a picture element or in a sizes attribute) will be used, with other media queries disregarded. Because of this, media queries for large viewports need to be listed first, with smaller viewports listed later.

However, since a breakpoints.yml file in a theme could be used either for responsive images or for some other potential module that deals with layout CSS, it's better to keep one consistent order for breakpoints in the breakpoints.yml file. How do we change that order for use cases like responsive images? Read on.

Reversing weight order with getBreakpointGroup()

Before

Previously both Toolbar and Responsive Images module retrieved breakpoints with the following code:

$breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());

After

Now the Toolbar module still uses that same code, but the Responsive Image module reverses the order of the breakpoints with the following code:

$breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));

This changes the sorting of breakpoints so they are ordered from the largest weight value to the smallest weight value, as is needed in the responsive images module.

This allows other modules that make use of breakpoints to use the default ordering from a small weight to a large weight, while modules that need the reverse order can do so with similar code as above. breakpoints.yml files can always use the smallest weight value for the smallest mediaQuery size, and the largest weight value for the largest mediaQuery size, with the trust that the order can be reversed if necessary.