MAJOR UPDATE: Since the original posting of this article I have spent months building a fully responsive Magento base theme for developers. The theme integrates the Gumby Framework in to Magento’s Community Edition 1.9 default/blank theme. The theme is built with a ton of great UI updates and Gumby Extensions while keeping the overall page load to a minimum. Check out the Magento Gumby demo site and Github repo.

Magento is now responsive! Frontend developers around the world rejoice! Then they realize that Magento is not built on an industry tested responsive framework like Bootstrap or Zurb/Foundation and the realization sets in that there is a gap here between having a responsive template and still needing responsive reusable classes.

For many Magento sites the best place for a search bot to find quality unique text outside of product pages is CMS pages. So let’s assume you have a large number of CMS pages or possibly are building a few static pages using Static Blocks & the Category -> Display Mode. Either way the fact is you need a grid system to most easily and effectively code your pages.

Since Magento CE 1.9 / EE 1.14 RWD is already a responsive template we do not need to go through and edit every .phtml file adding special classes to adjust column widths and create rows. Instead rely on Magento’s RWD template to handle most of the responsive responsibilities throughout the site. Only add in a grid system for what you need and where you need it.

The Solution

Thanks to Graham Miller for building his Responsive Grid System Calculator which we’re going to use to solve our problem. Using the calculator I’ve created a 12 column grid with 2% margins, you can use the calculator to draft up a different grid system based on your site’s needs. The results of the calculator gives us an example of HTML and the beautiful CSS that we need.

Here is a copy of the CSS generated using the Responsive Grid System Calculator. As you can see it uses one break point of 480px but you can easily edit this to use any width your design calls for.

Create this file in your file system under skin/frontend/custom-package/custom-theme/css/ and for the example I will use the file name grid.css.

Time to Add the File

You have a couple options here. You can copy template/page/html/head.phtml to your custom-package/custom-theme file structure and add in:

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('css/styles.css'); ?>" media="all" />

But this really isn’t the most appropriate Magento method. Instead let’s create (if you already have not yet created) a local.xml file. Simply go to your custom-package/custom-theme/layout/ folder and create a new file called local.xml. Magento will add this file’s XML after processing all other XML and is the preferred method for XML changes.

In the file place the following code:

<?xml version="1.0"?>
<layout version="0.1.0">

  <default>
    <reference name="head">
      <!-- adds the responsive grid system -->
      <action method="addItem">
        <type>skin_css</type>
        <file>css/grid.css</file>
      </action>
    </reference>
  </default>

</layout>

This will add grid.css to all pages within Magento using the “default” handle. Or if you only need to load this CSS file on a couple CMS pages you can easily call the file from the admin. Log in to the Magento admin and open up the CMS page you want to add the grid to. In the left hand column click on the Design tab. Now you can place the following XML into the Layout Update XML block.

<!-- adds the responsive grid system -->
    <action method="addItem">
        <type>skin_css</type>
        <file>css/grid.css</file>
    </action>

Clear your Magento cache and you’re done!

You can now code using The HTML section of the Calculator page as your guide. Here is a short example:

<div class="section group">
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
    <div class="col span_1_of_4">
    1 of 4
    </div>
</div>

If you have any questions please let me know!