Create a different look or layout on any of your pages by using the Per Menu Item Configuration. Colors, layouts or features can be changed for any menu item. Find out more...

Responsive Grid System

The Gantry Framework was originally based on the 960 Grid System that offered a 12-column grid structure based on a fixed 960px-width layout. From version 4.x on, the responsive grid system of Twitter's Bootstrap is used.

Check out the Gantry introductory video to see the responsive capabilities of Gantry 4-powered template designs. Powerful features, presets, layout configuration, responsive design, and much, much more.

The Responsive Layout adapts to the viewing device, such as a smartphone, tablet or desktop, based on the resolution of the screen. There are five different width formats, and each utilizes the grid structure in a different way. This is achieved through @media queries, which can detect the width of the browser window, and allows for different CSS, accordingly. This is the basic function that makes responsive designs possible. In effect, a single site will adapt automatically to the viewing device, without the need for separate layouts -- like mobile.

As a note, a responsive layout does not detect a specific device. It only detects the width of the viewing environment. So, any names, such as smartphone or tablet, are convenient shorthand only.

Responsive Grid Info

The responsive grid system is designed for desktop, tablet and smartphone systems. Each has minor modifications to ensure compatibility in different modes. The table below shows the breakdown of screen resolutions and associated devices, and which layout characters are then applied to each.

Responsive Support Classes

Another useful available feature, via Bootstrap, is the collection of responsive utility classes that can be used to help tweak layouts by providing a simple method of showing or hiding modules. Insert the below support classes into your module settings to show/hide a module for a particular mode, or add to a specific element in your content.

Class Phones (<= 767px) Tablets (768-959px) Desktops (960-1199px) Desktops (>= 1200px)
visible-phone Visible Hidden Hidden Hidden
visible-tablet Hidden Visible Hidden Hidden
visible-desktop Hidden Hidden Visible Hidden
visible-large Hidden Hidden Hidden Visible
hidden-phone Hidden Visible Visible Visible
hidden-tablet Visible Hidden Visible Visible
hidden-desktop Visible Visible Hidden Visible
hidden-large Visible Visible Visible Hidden

Media Queries

The actual media queries CSS looks like this:

/* Smartphones */
@media (max-width: 480px) { ... }

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }

/* Large Display */
@media (min-width: 1200px) { ... }

Navigation

The menu system for a smartphone device will be that of a select field. A select field is a great solution for this because most phones have nice native select UI elements. Using this method is necessary as to make the menu accessible on the mobile devices, as Fusion and our other menu types are simply too complex to render effectively on these devices. A new menu system will be created that is responsive, but will also form part of Gantry.

All other sizes will use the normal menu system build on RokNavMenu, such as Fusion Menu or SplitMenu.


Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.