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.
<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
The usual demo pages.
Seeing is more convincing than believing
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
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.
The code is available on github under MIT license. The author is Jerome Etienne.