Last updated November 15, 2012. Created by laura s on August 30, 2011.
Log in to edit this page.

Note: This documentation is for the 7.x-2.x branch, and needs updating for the 7.x-3.x (HTML5) branch.

Square Grid theme is a very lean, lightweight grid theme that provides a framework for you page layout ... and that's it. It incorporates responsive design principles that are configurable via your theme's settings, to present usable layouts for various screen sizes. That's it. We want your theme to load quickly, with as little grid framework css as possible.

The Square Grid theme is inspired by the Square Grid CSS Framework by Avraham Cornfeld. There is a description and link to design resources such as templates at http://thesquaregrid.com/.

The theme's approach

The concept of this theme is simple: To provide a base theme defined by the Square Grid framework, for designers and front-end developers to use as a parent theme for a Square Grid-based design. There are several excellent Drupal base themes that provide all kinds of extra bells and whistles, such as rich configuration options, plug-in support for modules such as Panels, and so on. Square Grid, on the other hand, is intended to be as lightweight as possible, while still meeting its goals and providing necessary functionality.

Versions descriptions

  • 7.x-1.x is the plain squaregrid framework – a basic Drupalification of Avraham's original Square Grid CSS framework. This branch will not see any further development, aside from critical bug fixes.
  • 7.x-2.x is a mobile-first, content-first implementation. It is under active development.
  • 7.x-3.x is the HTM5 branch, building off of work in 7.x-2.x.

Getting started

  1. Install the Square Grid theme in your Drupal site under /sites/all/themes (or, if on a multisite configuration, /sites/[example.com]/themes, as appropriate).
  2. Create a new theme in the same folder, parallel to the squaregrid folder. In your new theme's info file, declare 'squaregrid' as the base theme.
  3. Copy in and modify templates and create stylesheets as desired.

See http://drupal.org/theme-guide/6-7 for more on creating themes.

Using the Square Grid CSS framework

35 squares in the grid

There are 35 squares across to define the grid. Each square is the same size. For example, in the 980px default grid size, each square is 28px wide. In this approach, a grid square can serve to define the width of a block element.

Margins between block elements add up to one square as well. This makes every block element line up with the grid, while allowing for comfortable whitespace between each block element.

Grid margin

Each grid definition has left and right margins of half of a grid width (e.g., in the 980px-wide layout, 14px on each side, adding up to a 28px grid square's width). You will want to compensate in your theme if you are adding borders or your design has visual components bleeding into these margins.

Grid CSS classes

Square Grid theme utilizes three kinds of classes: "sg-x", "push-x" and "pull-x". This approach, borrowed (with much gratitude) from 960.gs, is used to enable "content first" page loads. This ensures that your primary content loads first without having to rearrange semantic order of content in your page.tpl.php template, even if there is visual display of sidebar content to the left of main content.

  • sg-x defines the width of a region. The integer value of x determines how may grid squares wide the region will display.
  • push-x defines a positive-value "left" position value in numbers of grid squares. Define a region's push value by the number of grid squares you want to *add* to the left of the region.
  • pull-x defines a negative-value "left" position value in numbers of grid squares. Define a region's pull value by the number of grid squares you want to *subtract* from the left side of the region's position.

For example:
main content => .sg-17 .push-11
first sidebar => .sg-10 .pull-18
second sidebar => .sg-8

To see this in a vastly simplified html layout:

<div id="wrapper">
  <div id="container">
    <div id="header" class="sg-35">
      HEADER
    </div><!--/#header-->
    <div id="content" class="column sg-17 push-11">
      MAIN CONTENT
    </div><!--/#content-->
    <div id="sidebar-first" class="column sidebar sg-10 .pull-18">
      SUPPLEMENTARY CONTENT
    </div><!--/#sidebar-first-->
    <div id="sidebar-second" class="column sidebar sg-8">
      MORE SUPPLEMENTARY CONTENT
    </div><!--/#sidebar-second-->
    <div id="footer" class="sg-35">
      FOOTER
    </div><!--/#footer-->
  </div><!--/#container-->
</div><!--/#wrapper-->

Note: The content and sidebar regions are pulled/pushed one square grid's value greater than the width of the region it's swappig with. This is to accommodate the 1 square grid of white space "gutter" between the regions. If you try this with the visible square grid, you can count the square grids and see that this makes sense.

Class values are defined in template.php

When you look at page.tpl.php in Square Grid, you will see that the sg-x values are not placed directly, but rather are added via custom variables.

Instead of:

<div id="content" class="column sg-17 push-11">

...the template has:

<div id="content" class="column <?php print $class_content; ?>"><div class="section">

These variables are defined in Square Grid's template.php file.

You can define your own region widths and positions by copying "example.template.php.txt" to your own theme, renaming it "template.php" and replacing in the function names "YOURTHEMENAME" with your theme name, then editing the sg-x, push-x and pull-x values.

Available theme configurations

Be sure to visit your theme configuration settings to check that the Square Grid configurations available to your theme suit your needs.

  • Toggle on/off the visible grid
  • Toggle on/off the registry rebuild
  • Enable/disable responsive design support
  • Enable various grid sizes

Designer resources

The easiest design to theme using Square Grid is a design based on the Square Grid. Use the Square Grid templates to provide the basis for your design. This will provide the basis for quick conversion from flat mock-up to html components. Free GPL-licensed Square Grid templates for design can be downloaded at http://thesquaregrid.com.

Updating Square Grid from previous versions

Every point release within a branch of Square Grid should not break any existing layouts. However, it's strongly recommended that you revisit your child theme's settings after any update of Square Grid, as the theme configuration options may have changed.

If you having trouble with a point-release update, such as grid stylesheets not loading as expected, try setting an alternative configuration in your Theme Settings, then setting configurations back to what you want. This seems to help in some cases where rebuilding the theme registry is not enough.

If you are upgrading from one branch to another (e.g., 7.x-2.x to 7.x-3.x), do not expect backwards compatibility. You will very likely have to update your child theme to work with a new branch of Square Grid.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.