Demystifying Drupal 8's breakpoints.yml file
While working through a couple of Drupal 8 projects involving a custom theme, I've been curious about the themename.breakpoints.yml file. I've dutifully updated it with the proper breakpoint values, but I've been a bit mystified with its actual purpose. There's nothing in either of the base themes I've used (Neato and Bootstrap) that actually appears to utilize the data in the breakpoints.yml files. While the breakpoints are defined in this file, they are also defined in the theme's source Sass and LESS files, for use in the processed CSS.
I decided to dig into the issue a bit more over the past few days in an effort to figure out exactly what the purpose of the breakpoints.yml file is. It turns out that the any module or theme can create a themename.breakpoints.yml or modulename.breakpoints.yml file. The Breakpoint module (included as part of Drupal 8 core) then reads these files and adds them to the site's configuration. At this point, other installed modules and themes can access this configuration and utilize it in their own functionality. This is exactly how the Responsive Image module (also part of Drupal 8 core) works. It accesses the installed theme's breakpoints configuration (via the themename.breakpoints.yml file) and serves up proper responsive images based on that configuration.
But, at this time, there is nothing in Drupal core that automatically allows breakpoints defined in the themename.breakpoints.yml file to be easily used in the theme's CSS. So, when a theme's breakpoints.yml file is modified, nothing will change on the site until the site's CSS is also modified. In effect, most theme's breakpoints will need to be defined in two places - the themename.breakpoints.yml file and the theme's CSS.
There are methods available (and still being developed) to "link" breakpoints defined in the breakpoints.yml file with the theme's CSS - usually as part of a pre-processing task when working with LESS or Sass.
Resources