Responsiveness

What is done...

The template is designed from the start to be as responsive as possible. It will format, hide an move the various interface elements according to available space, with the following built-in layouts:

Most elements are fluid to fit in the various sizes, and you can play with the responsive columns classes to control precisely how your content is displayed.

...and how to handle it

The template handles the basics of responsive design, but sometimes your scripts need to know what mode is currently on. The template includes several tools for this:

Get the current mode

At any moment, you can get the current mode name:

if ($.template.mediaQuery.name === 'desktop')
{
	// Do something only for widescreens
}

Need to know if the current media query is smaller than a given one?

if ($.template.mediaQuery.isSmallerThan('tablet-portrait'))
{
	// Do something only for smaller screens
}

Also available: has() to check if a given media query is on.

Listen for changes

Knowing the current mode is great, but what is more interesting is to track responsive mode changes. Several events are triggered to help your scripts:

init-queries
This event is fired at startup once the media queries tracking mode has started
change-query
This event will be fired for every mode change
enter-query-[name]
This event fire when entering the corresponding mode
quit-query-[name]
This event fire when leaving the corresponding mode

Note that you can also listen for event relative to media queries groups: for instance, mobile-portrait and mobile-landscape belong to the group mobile, so you can track them both by using enter-query-mobile and quit-query-mobile. Note that these events only fire when changing group, not when changing between children modes.

Want to give it a try? Resize your window and watch the fired events below: