A jQuery plugin that gives you the option to define the relative sizes of all your fluid grid columns in a script, instead of directly in your HTML markup.


Fluid and responsive grid-based systems, such as the 1140 Grid by Andy Taylor, are helpful learning tools and offer clean, practical starting points for any designer looking to implement a responsive web design. However, denoting grid sizes in the HTML markup itself (perhaps for the sake of compatibility with JavaScript-disabled browsers), nevertheless diminishes one of the great advantages of tableless web design - the ability to separate content and presentation.


Below is a piece of code from the 1140 Grid's demo page for a single row with two columns - one with a width of two grid units, and one with a width of ten:

<div class="container"> <div class="row"> <div class="twocol"> <p>Two columns</p> </div> <div class="tencol last"> <p>Ten columns</p> </div> </div> </div>

In the demo, the class names of each column denote their widths. This may become a problem for bigger sites that decide to change their layouts in the future; the developer would have to make adjustments to a potentially large volume of documents or templates. But with Mitosis.js, the same row can now be written like so:

<div class="container" id="main"> <div class="row"> <div class="column"> <p>Two columns</p> </div> <div class="column"> <p>Ten columns</p> </div> </div> </div>

and the column widths can be defined in a separate jQuery file:

$('.container#main .row').unevenSized(2,10);

Equally-sized columns are even simpler to size. Consider a row of n columns that we wish to make the same size (where n<=12, as Mitosis.js is based on a 12 column grid):

<div class="container" id="main"> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> . . . </div> </div>

These columns can be sized with the following script:

$('.container#main .row').evenSized();

What if we have multiple rows in a container?

<div class="container" id="main"> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> . . . </div>

Mitosis.js iterates through each row, so we don't have to change how we call it:

$('.container#main .row').unevenSized(3,6,3);

You can download Mitosis.js and a concise example here.


The downside of using Mitosis.js for page layouts is that JavaScript must be enabled on the client browser. Depending on your user base, this can be a significant disadvantage to using Mitosis.js over a pure CSS solution.

Which brings us to the next point: separating style and content in a flexible design is possible using pure CSS, by exploiting CSS inheritance features. But this can result in verbose code, even with the use of CSS preprocessors, as you would have to account for all the different media queries for every type of row. Still, you might find this to be the better solution if you have a significant number of users with JavaScript disabled.


Mitosis.js Ver. 0.1
This work is licensed under the MIT License.
Please feel free to submit issues on github or to @tianheyang.


CSS-Only Grid
The 1140 Grid is a responsive, CSS-only grid system based on 12 columns by Andy Taylor.
Responsive Web Design
Ethan Marcotte's detailed discourse on responsive web design.