RocketTheme Blog

As outlined in the previous article, we are hard at work developing Gantry 4 that will be providing all the bits needed to create responsive designs. In this article I wanted to outline exactly how that will work and what features you can expect.

After evaluating all the responsive frameworks and various solutions we have chosen to use the responsive system from the Twitter Bootstrap framework. Bootstrap is a project from the talented folks at Twitter that was designed to provide "simple and flexible HTML, CSS, and JavaScript for popular user interface components and interactions". If you have been using RokSprocket or RokPad in your projects you may not realize that these were built with elements from Bootstrap. New for Bootstrap 2, is an all new responsive design scaffolding that utilizes a grid system with media queries to provide support for various display types.

Responsive Grid Breakdown

Gantry 4 is being built based on this same responsive grid system with minor changes to enable better backward compatibility with our current crop of designs. The breakdown in screen resolutions and their relative hardware is going to be:

In terms of media queries this translates directly into:

/* 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) { ... }

The only difference from the standard Bootstrap sizes here is that rather than 980px for the Desktop view, we are using 960px as this was our standard desktop size prior to adding responsiveness. One other difference between our responsive grid and Bootstrap's is that we do not hard-code gutters into our grid and we let the block's configure them as needed. This allows for much greater flexibility when it comes to design as we can easily create designs that align flush with the edge of the grid without having to rely on negative margins.

With the responsive layouts we will continue to use our 12 grid system that is fully integrated into Gantry and allows for complete control of layouts with nice GUI controls, no need to manually add up your column widths here! So even with the responsive capabilities you will still have 100% of the power and flexibility that you know and love from Gantry.

Responsive Support Classes

Another very useful feature that Bootstrap brings to the table is a collection of responsive utility classes that can help tweak layouts by providing a simple way to show and hide modules. You will be able to enter these module class suffixes for any module to better control where it will show or be hidden.

Navigation and Responsive Design

One of the most important elements of a site is the navigation, after all that's how a user is able to actually explore your site. RocketTheme has a very sophisticated menu system that we call RokNavMenu. This menu system supports custom renderers that empower us to create a variety of menu structures ranging from our drop-down style fusion menu, as well as various split-menu solutions, and even a hybrid splice-menu that combines both of these into one.

Our fusion menu is capable of displaying multiple levels of drop-down as well as custom columns and even modules right in the menu itself. All this power and customization in a menu doesn't translate well to a mobile device where space is limited. Because of this we are going to be employing a standard technique of using a select field for smaller devices, namely smartphones. A select field is a great solution for this because most phones have nice native select UI elements built right into the mobile OS, making it easy to see and navigate between options.

This is really our stop-gap solution until we release our new menu system. The new menu system will be designed from the ground up with responsive in mind and will provide a much more customizable mobile view with touch events as well as a faster and more responsive standard view. The new menu system will be released under the Gantry Framework project and will also be GPL.

In part 3 of this series we'll cover our extensions and their new responsive abilities.