Compress and Compile CSS and Javascript to Make Respond.js Work in Drupal

August 29, 2014

Filed Under: Drupal | No Duh | Quick Tip

I was recently working on a development version of a Drupal site, and I couldn’t get respond.js* to work for the life of me. It was working fine on our live site, and I couldn’t figure out what I had changed on the development site that would break respond.js.

It turned out that, since I was working on development, I had unchecked the little box under admin > configuration > performance that says “compress and compile CSS and javascript.” It’s typically a good idea to check this box on your live site, but it makes development easier to uncheck it, since that way you can track down exactly where different CSS and javascript is coming from.

But respond.js works by requesting a fresh copy of the CSS via ajax, and when you have fifteen different CSS files from plugins and modules it stops working correctly. Compile all those and it should start working again.

*If you’re reading this, you probably know that respond.js is a polyfill that lets media queries work in browsers that don’t natively support them. Typically it’s used so that your site doesn’t look like a total mess in IE 7 & 8.