Responsive layout

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 (and corresponding stylesheets):

mobile-portrait

style.css Mobiles - portrait / Under 480px wide

mobile-landscape

480.css Mobiles - landscape / 480px to 767px

tablet-portrait

768.css Tablets - portrait / 768px to 991px

tablet-landscape

992.css Tablets - landscape / 992px to 1199px

desktop

1200.css Wide desktop screens / 1200px and up

How does this works?

To achieve this, the template uses a set of files designed for each layout, which are loaded accordingly to viewport size by media queries. For older browsers, a polyfill (respond.js) is used.

If your application uses nested folders, you need to set the path to the polyfill (located in /js/ folder) using $.template.respondPath

The template use the principle behind 320 and up developed by Andy Clarke (@malarkey): as mobile device are the least powerful devices, they need to have as few styles to parse as possible, so the base styles are designed for them. Then, for each larger layout, an additional stylesheet is loaded and will override some styles to give the expected layout.

So if you are changing some style and can't get the right result, check if one of the mediaqueries files don't overwrite your changes - sound obvious, but it may happen more often than you think!

Gettin' Jiggy With It

In an admin skin, many elements are resolution and layout dependant, so the template provides several ways to work with media queries:

Get the current media query

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
}

Need to check if a given media query is on?

if ($.template.mediaQuery.has('tablet-portrait'))
{
	// Fire if this media query is on, even if it is not the current one
}

Listen for changes

Knowing the current mode is great, but what is more interesting is to track media queries 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 fires when entering the corresponding mode

quit-query-[name]

This event fires 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.

To use these events, just listen on document:

$(document).on('init-queries', function()
{
	console.log('media queries ready');
});

For instance, if you want an element to be visible only on desktop mode:

var element = $('#only-desktop');

$(document).on('init-queries', function()
{
	if ($.template.mediaQuery.isSmallerThan('desktop'))
	{
		element.hide();
	}

}).on('enter-query-desktop', function()
{
	element.show();

}).on('quit-query-desktop', function()
{
	element.hide();
});