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

For smaller screens like on mobile phones we have to use a much smaller header layout which fits the website logo, navigation menu and search. For example a rather large dropdown menu won't work anymore on lower screen resolutions. That's why we added a JavaScript which automatically creates HTML markup for a compact header layout for mobile devices. The logo and search markup is simply cloned and injected into the new header. As responsive navigation we've chosen a select menu. The dropdown menu is transformed into a select box with an option for each menu item. This is a widely accepted solution which works for any design. It's clearly recognizable and easy to use for users. All these scripts use our `$.onMediaQuery` and are only executed when the view port drops below a certain width.

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!