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:
- Mobiles - portrait
- Mobiles - landscape
- Tablets - portrait
- Tablets - landscape
- Wide desktop screens
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:
Enter mobile portrait