
Warp gets responsive – A look at the JavaScript of Warp 6.2
As we started working on bringing the responsive design to our Warp 6 theme framework we quickly realized that it is not only the CSS which does all the work. We also needed JavaScripts which would add even more functionality in addition to the CSS media queries. Fortunately the JavaScript engines of modern browsers offer a function called window.matchMedia which can evaluate media queries, so you are able to handle the result. And for all browsers which support media queries in CSS but lack of the window.matchMedia
function we added a tiny polyfill to add this functionality.
We also wrapped the window.matchMedia
function in our own jQuery function $.onMediaQuery
which makes it easier to attach multiple callback functions to a media query. Here is an example on how to use this function:
/* Attach custom callbacks to a media query */
$.onMediaQuery('(min-width: 400px)', {
valid: function() {
/* the view port is at least 400 pixels wide */
},
invalid: function() {
/* the view port is less than 400 pixels wide */
}
});
You can add different media queries to your JavaScript and register callbacks which get executed each time that media query becomes valid or invalid. This means certain parts of your JavaScript are excecuted depending on the current screen size. Isn't it awesome?
Matching Heights
The Warp theme framework uses a script to match different heights of elements. For example, it fits all horizontal aligned modules on the same position to have the same height. Setting the height to a fixed value does not work in responsive layouts because it needs to be adapted whenever the view port size changes. That's why we have rewritten this script which now automatically recalculates the height when the view port changes and also can completely be removed when it is not needed for a layout.
Navigation and Search

What is next?
Our first responsive club theme will be the successor of our popular Nano theme and will be released in July. It will use all the new responsive layout features and serve perfectly as a blueprint to your own custom themes. We will also update our free Master theme to support all the new responsive layout features as well. Enjoy!