Submitted by chrishu on Mon, 04/13/2015 - 12:00


This is just another stage of my gentle Drupal 8 theming discovery, I have written a brief article on the way in case it is useful when somebody else searches for breakpoint information. Whilst there doesn't appear to be too much confusion as such; most articles, documentation and answers repeat the blurb without actually explaining what it is all about.

When I first saw the bartik.breakpoints.yml file it ignited a little firework display of questions in my mind, mostly around 'do I need it in my theme?', 'what EXACTLY does it do?', 'how can the back-end knowing about my breakpoints, interact with the front end?' etc. etc.

I could make a number of guesses but ...


Do I have to define breakpoints for my theme?

No you don't, in fact as far as I can see unless you enable the Responsive Image (a little more on this later) module they won't do anything at the moment. If you decide you need them later (perhaps because of some other module) then you can create a mytheme.breakpoints.yml at any point, refresh the caches and you are good to go.

Do the breakpoints in the yml file affect my front end?

Unless you are using a special module (currently Responsive Image is the only one I am aware of, it is in core but disabled by default) the breakpoints will do nothing, if you want to make your theme responsive just use the normal front-end techniques you use already, there is no magic sadly the normal front-end, backend disconnect applys, your Drupal site knows the breakpoints set for your theme on its own terms but has no idea what is actually occurring in the browser. 

Don't I need breakpoints to make my admin toolbar work?

No you don't fortunately. The Toolbar module depends on breakpoints but only because it has its own toolbar.breakpoints.yml file defined. Your theme can benefit from using the toolbar when you are logged in, in all its' glory and you do not have to define breakpoints to make anything work. There are a few minor steps you may have to take for the toolbar if are themeing from the the ground up, but I will address these in a later post.

Do the Media Queries have to be the same as the actual ones in my theme?

No, they should almost certainly have some relation to actual break points in your theme, but in theory they can be different, or a subset of how your theme works.

So where is the magic?

Well if you look at how the Responsive Image module works (a little on this below), or the Toolbar module you can see the media queries defined for a theme or module being used to either dynamically output a HTML element (containing ALL the media information) or utilised by Javascript in both cases the breakpoint information in your theme is being handed to the page so it can sort out what it needs to do.

Responsive Image module 

I added breakpoint information to the theme for my site as in the the file bootrun.breakpoints.yml.

After enabling the Responsive Image module it was a simple task to set up responsive image styles in configuration and apply them to the image field for articles.

I don't use a lot of images on this simple blog but if you resize this window you can see the dimensions for the image of the rather handsome guy at the top of the page change in line with breakpoints for this site. Not spectacular but more control than the default: set image width to 100% of container and height auto approach.

No point in repeating what has been done elsewhere, for a detailed video on Drupal 8 breakpoints and responsive images and its use in the Responsive Image tag you can watch this video. Alternatively a good write-up of responsive images in Drupal.

Config in themes

Config is not just for modules, by adding this yaml file to my theme, the responsive images styles can be created automatically on theme install. I have not found a way to declare a module dependency in a theme yet however. 


I will keep pointing out that all the themeing in Drupal 8 I am doing at the moment is entirely learning by play rather than an example of good Drupal 8 theming or indeed front end practices (at least I have gone beyond running on Bartik ;)).

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.