Download Now

In a world of progressive design, it’s important to build responsive websites that both look beautiful and function perfectly.  In a world where a misplaced pixel can make the difference between landing your next client or eating ramen for the next month, it’s important to make sure you provide top quality work, still within a timely manner.  jQuery Easy Columns is a rapid prototyping plugin that greatly aids in creating simple responsive site layouts.  Using jQuery Easy Columns, you can create fully responsive 2 or 3 column layouts by simply adding classes to a div structure.

How does it work?

In order to use jQuery Easy Columns, you must install it as you would any other jQuery plugin.  First, download the zip file using the button above.  After downloading the file, extract it to a location of your choice, and move the extracted folder to your server using your favorite FTP client.  After moving the plugin to your server (and of course calling the jQuery source into your document), call it in on your site using the following snippet of code:

<script type="text/javascript" src="/path/to/jquery.easycolumns.js"></script>

Once the file is called in, you can initialize the plugin by adding the following line to your site’s jQuery file:

$("body").easyColumns();

This will invoke Easy Columns with no options (default mode).  Now that Easy Columns is invoked, you can go ahead and start writing your HTML.

Easy columns works by assigning classes to a div structure in your HTML document.  The available classes are as follows:

2 column

• left2
• right2

3 column

• left3
• middle3
• right3

For example, let’s say you wanted to make a blank webpage with a very simple three column layout on it.  You could use the following piece of code:

<div class="left3">
    <p>This is the left column</p>
</div>
<div class="middle3">
    <p>This is the middle column</p>
</div>
<div class="right3">
    <p>This is the right column</p>
</div>

The same principle can be applied to creating two column layouts as well by simply utilizing the two column class.  These column structures can also be nested inside of eachother to create even more complex layouts.  Take for example the following:

<div class="left3">
    <p>This is the left column</p>
</div>
<div class="middle3">
    <div class="left2">
        This is the left sub column in the main middle column.
    </div>
    <div class="right2">
        This is the right sub column in the main middle column.
    </div>
</div>
<div class="right3">
    <p>This is the right column</p>
</div>

The aforementioned structure would create a three column layout that spans the entire page, and in the middle column would be two equal width columns.  This would essentially create a four column layout, with the outermost two columns being twice as large as the inner two.

In theory, these columns could be infinitely nested, but at a certain point it becomes pointless as the width of the resulting columns is too low.

You can use this plugin to rapidly prototype two, three, four, six, and even eight column layouts, however we only provide classes for two and three column layouts.  Later releases may feature built in support for higher column counts.

Plugin Options

There are a number of inbuilt options with this plugin.  Below is a comprehensive list of all available options to date.

• resetNeeded – “true” or “false”.  Determines whether or not to use the included CSS reset (change this to true if you aren’t using a CSS reset).  [default : false]
• debugBorders – “true” or “false”.  Set to true in order to enable a 3px dashed border around every column. Used for debugging purposes to visualize your columns. [default : false]

Say for example you were having an issue with a certain column not lining up where it should be.  You could set the debugBorders option to true in order to help see where your content is led astray like so:

$("body").easyColumns({
    debugBorders : 'true'
});

This will enable the border around all of your boxes.  Other options can be called in the same manner as this, and values should be seperated by a comma.

Plugin Support

This plugin is still in it’s infancy, and is not guaranteed against bugs.  We’ve done our best to make it as bullet proof as possible, but like any plugin, errors may still arise.  If you find a problem with our plugin, let us know by getting in touch via any of the means on our contact page.

Like this plugin?

If you like this plugin, and it’s helped you create a better, more sustainable web, feel free to donate to help us put more time into development.  Friendly donations from happy users like you are what make our plugin development possible!

jQuery Easy Columns Plugin ChangeLog

v1.0 – June 11, 2013

• Initial launch of the jQuery Easy Columns plugin