Warp's Responsive Scripts

A look at the responsive JavaScript of the Warp 6.2 theme framework

Jun
18

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. Thats 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

Warp 6.2 Responsive 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!

Related Posts

Warp gets responsive - Part 1 (CSS)
Widgetkit Gets Responsive

By Steffan | | Posted in Warp

Comments (21)

  • joel

    joel

    | Profile |
    Yoo guys are just yoomazing! Love the way the js has been implemented. Looking forward to the July theme...
  • kris.olszewski

    kris.olszewski

    | Profile |
    Brilliant. I think Warp should be packaged like an HTML/CSS/JS framework for any project. WordPress and Joomla are great, but sometimes you just want to code things yourself using other programming languages (.net or ColdFusion). I'm sure some devs would even buy it!
  • steffan

    steffan

    | Profile |
    Warp use a lot PHP code to generate HTML for the layouts, modules and menus, we would leave out of features by just doing a static version in plain HTML/CSS/JS.
    • kris.olszewski

      kris.olszewski

      | Profile |
      That makes sense. Great work guys, keep it up!
  • morgan.gustafsson

    morgan.gustafsson

    | Profile |
    Like it alot :-)
  • eric.brissette.83

    eric.brissette.83

    | Profile |
    Will menu modules be easily useable on mobile devices, aside from the Main Menu position?
  • magicspon

    magicspon

    | Profile |
    What about Zoo and widgetkit?

    responsive images?

    looks ace yoo
  • greg.van

    greg.van

    | Profile |
    Awesome Yoo Theme Dream Team... I can't wait! =)
  • louis.garcia

    louis.garcia

    | Profile |
    Awesome. I plan to dive in to the world of theme development with your new Master responsive theme. Thanks for the updates, I can't wait.
  • ralharithi

    ralharithi

    | Profile |
    Great planing.

    Can you share some info on how is this going to influence Zoo layouts and if there is any closer integration "theme wise" on the applications.
  • dobrodukh

    dobrodukh

    | Profile |
    Oh, no, no ... Best Theme - Royal Plaza. Definitely! When will the update??
  • dean.villegas

    dean.villegas

    | Profile |
    Will past templates get updated, such as NANO?

    GOOD JOB Yootheme team! You are always on the top of your game!
    -Dean
  • peter.salameh

    peter.salameh

    | Profile |
    "Our first responsive club theme will be the successor of our popular Nano theme and will be released in July."

    Hi Sasha,

    Looking forward to using the new responsive theme. It would help in planning to know if your successor to the Nano theme will be similar to Nano.

    Thanks, Peter
  • chogarcia

    chogarcia

    | Profile |
    awesome!
  • kevin.morrison.1

    kevin.morrison.1

    | Profile |
    Is there any plan on updating any of the existing themes based on this new framework or will this be all new themes moving forward?
  • senmel

    senmel

    | Profile |
    I hope July template will be more complex one than Nano.
  • ray.lawlor

    ray.lawlor

    | Profile |
    I'd be interesting in seeing how my current 6.1 Master Theme creations (of which there are 23 and counting) will react upon upgrading to 6.2...

    I fear a lot of localhost testing before going live!

    Can't wait though!

    Ray
  • luis.calero

    luis.calero

    | Profile |
    How do I publish/unpublish modules for the mobile sizes only? Also, how do I remove the search bar from the responsive header? I may not always want to use it!

    -Thanks!
  • luis.calero

    luis.calero

    | Profile |
    Nevermind, just read about the Responsive Utility Classes hidden-tablet, hidden-phone and hidden-desktop.. Still, some documentation on how to create responsive module positions lie the default responsive header would be great!

    Thanks for the awesome work and thanks in advance for any pointers!
    - Luis
  • alan.leenhouts

    alan.leenhouts

    | Profile |
    I just switched from my custom master theme to the nano2 responsive theme. I am loving it so far, I almost started using a different responsive theme before I found out you guys made warp responsive... Saved myself a ton of work moving stuff around.

Leave a comment

Please login to leave a comment.