960 Grid on jQuery-Mobile

jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.

How to use it ?

To use 960 grids in jQuery Mobile, simply add one line:
    <link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <link href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-960.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
And now you can use normal 960 grid syntax inside jQuery mobile pages
    <fieldset class="container_12">
	<div class="grid_2"><button type="submit">Button 1</button></div>
	<div class="grid_8"><button type="submit">Button 2</button></div>	   
	<div class="grid_2"><button type="submit">Button 3</button></div>	   
    </fieldset>
And without more effort, jQuery Mobile gives you this result.
For a complete documentation of 960 syntax, go see its homepage. 960 homepage

Demo

The usual demo pages. Seeing is more convincing than believing

Demo for fluid 960 Demo for fixed 960

Motivation

I loved jQuery-mobile ability to make an application by just describing its structure in HTML5. It makes applications real fast to develop.

But jQuery mobile layout is currently rather raw. They only split the width in even parts, providing little controls to the designer. It uses an custom API with names ending with a, b, c or d, ui-block-a for example. Not the classic grid-4 or span-3, so it feel awkward.

All in all, i felt jquery mobile layout was uselessly difficult to use, especially on large screens such as tablets. 960 grids are flexible and well known. So i used ported 960 grids to see if it helps.

jQuery Mobile Grid Docs

Download

jquery-mobile-960 has 2 versions of 960 grids: one is fixed width of 960px, the other is fluid. Each version supports 12 and 16 columns.

jquery-mobile-960.css jquery-mobile-960.min.css jquery-mobile-fluid960.css jquery-mobile-fluid960.min.css

About

The code is available on github under MIT license. The author is Jerome Etienne.

jQuery-mobile-960 on github Jerome Etienne Homepage