Logo

Template Guide

GavickPro has begun to release what we term responsive layout templates.  This document explains the features of these templates.

The new “Layout” section manages template settings associated with page design.  This is related to our new approach to template design whereby pages will now have the capability to scale up or down in order to match the screen sizes of various devices: from full desktop-wide screens to tablets to the small touchscreens found on smartphones.

The following changes were necessary for us to implement support for Responsive Web design:

New layout for module positions

Every responsive layout template ships with three layout variations. These layout variations are:

Let us compare these layouts in more detail.

The image below demonstrates that the main section of the template consists of two columns:

Responsive Layout Grid

The mainbody column is partially combined with the sidebar because modules from the sidebar on smaller screens should be placed below mainbody. So, in this instance, the mainbody block is treated as a single moveable block of sidebar modules. The sidebar module uses MooMasonry to fill out the available space; we will discuss this mechanism a little later in this article.

Four basic elements have been changed on the tablet variation of the standard layout:

The layout for mobile devices has received similar treatment:

How Does This All Work?

We have embedded a few media queries into each template:

Media queries for the tablet.css file are calculated automatically depending upon settings of the layout section.

In general, the tablet layout is enabled when the screen size is smaller than the mainbody column widths (but not smaller than value of the option min. tablet width).

Tablet Layout

The mobile.css file content is enabled for smartphones with a screen size smaller than 640 pixels (of course, with a pixel ration of 2.0).

For higher resolutions, the default layout will normally be an automatic fit using the template grid.

Full Grid Preview

How Is the Template Layout Grid Configured?

Let’s take a closer look at the new Layout section in the template’s back-end:

Responsive Layout Settings

A few important options are found here.

Grid Base Width and Grid Spaces

The last option is of lesser importance for the layout:

MooMasonry is an amazing and very important part of our responsive templates. We have improved the original script with our own adjustments.

How is MooMasonry Used in the Templates?

MooMasonry is used in three module positions in each GavickPro responsive design template for Joomla:

In general, MooMasonry fixes the block positions to avoid problems due to blank spaces resulting from floating elements.

The following image compares the traditional layout with float with the layout generated by MooMasonry:

 

MooMasonry generated layout

On wider screens, MooMasonry uses the column base width to generate the modules layout. On smaller screens (tablet / mobile phones), it uses a percentage width for the dual or single columns of the modules.

New Suffixes for Modified Module Positions

On wide screens, the following special module suffixes may be applied:

New suffixes for module positions

Important Note!

The module cannot be wider than the mainbody column. So, if you set the mainbody width to 3 then the suffix fourfold will have the same width as the suffix triple. With the mainbody width set to 2, the suffix double will be equal to the maximum and the suffixes fourfold and triple will be equal to the double suffix module width. This limit was necessary for situations where modules land under the mainbody column, but the tablet.css is still not loaded. Please remember that we recommend using the full suffix, which generates 100% module width, only for modules which are last in any particular module position. Applying full in other situations will lead to problems with positioning of other blocks.

In general, you can use the special module suffixes to control layout of modules. We have also updated a few other important items – the most important being the fact that the script now controls the block height; if it changes, then the layout will be rearranged with a small delay to adjust for the new dimensions.

New Suffixes for Mobile Devices

When preparing a Web page for display on a wide spectrum of device types, you must consider that certain information may only be absolutely required on specific devices. This is why we have produced four special suffixes:

To suppress a module from displaying on both the tablet and mobile devices, apply both suffixes simultaneously, such as: “ notablet nomobile” (and remember to place a space at the beginning of each suffix!).

Mobile Section Removed from Template Settings

This change was obviously needed as a result of new dynamic nature of template layout based upon device screen size. Additional changes were necessary to prepare the page for touch devices. This is why we’ve prepared a special script which changes the way main menu works on tablets: using a click to open a submenu and a double-click to open the link.

Summary

We have implemented the responsive Web design layout in preparation for our new templates in a post-PC era. We will continue to improve the template settings and add new options, creating additional possibilities.

Please remember that when using a responsive template for a Web project, only modules developed to work with the responsive layout should be selected. For example, our Tabs GK5 module fully supports the responsive design in the horizontal mode. We have also added new options for the News Show Pro GK4 to make it more responsive, and we will soon release responsive styles fro the Image Show GK4 module.

Template Design © Joomla Templates | GavickPro. All rights reserved.