How to Use jQuery Mobile Grid and Columns Layout

jQuery Mobile First Look

Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development

Trying to communicate and provide information in an effective way can be a little trickier when we are targeting mobile devices; their screens are relatively small (ridiculously small if we think about our 24 inch iMac resting on our office desk), and we have already understood that we cannot display content in the way we used to, back in the days when desktop computers were the only way to access data on the Internet.

With the advent of mobile browsing, new solutions had to be found.

The jQuery Mobile framework provides a number of tools, widgets, and components which are extremely helpful in formatting our content and make it look elegant and put-together even on our beloved smaller-screen devices – well, especially for them!

In fact, the difficulty in designing, formatting, and correctly showing a page on a mobile device is going to become a no-brainer using the set of elements jQuery Mobile provides in order to allow for an easy styling of our web application content.

How content is displayed

Yes, there is nothing wrong in just writing down what our website or web application is about in the HTML file. It's always worked and always will.

The actual point here is taking advantage of the tools jQuery Mobile offers us to format our information, specifically for mobile devices.

For example, there are occasions in which the need for multiple columns may arise: we can use a layout grid, which is nothing more than some CSS-based columns.

Or, on a completely different note, we might just need to hide/show a block of content: collapsible blocks have been designed for this, and can be easily implemented in our site layout.

But before we begin analyzing any of the methods in which we are able to format our content according to our liking, we should take a look at how content is displayed in its basic HTML formatting.

Based upon the "light hand approach" (as they call it), jQuery Mobile lets the browser rendering take precedence over any other third-party styling, with exceptions made for the following little tweaks the framework applies to any page by default:

Adding a bit of padding for a better readability

Using the theming system to apply fonts and colors

This particular approach to styling by default should make the designers really happy, as they often find themselves fighting with preset colors schemes, default fonts, weird margin, and padding values and usually end up resetting everything and starting again from scratch.

Thankfully, the default padding value looks quite right and, as far as theming goes, we are able to easily customize (and create new) themes through CSS files and a theming framework which is extremely versatile and flexible.

Default HTML markup styling

So, what happens if we just write some HTML markup and want some text to be bold, emphasized, or hyper-linked? jQuery Mobile applies some basic styling to the elements and makes their look consistent with the simple and clean layout we have already seen in action.

The following screenshot represents how headings and standard paragraphs are displayed and generated by the following code:

<!DOCTYPE html>
 <html>
 <head>
 <title>Default HTML markup styling</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/
jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-
1.0a2.min.js"></script>
</head>

<body>
<div data-role="page" id="home">
<div data-role="content">
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum
(emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur
adipiscing elit.</p>

<blockquote>Blockquote containing a <cite>cite</cite></
blockquote>

<p>This is a paragraph. <strong>Lorem (bold)</strong> <em>ipsum
(emphasized)</em> <a href="#">dolor (link)</a> sit amet, consectetur
adipiscing elit.</p>
</div>
</div>
</body>
</html>

The result is shown in the following screenshot:

how-use-jquery-mobile-grid-and-columns-layout-img-1

Similarly, the following code produces a preview of what lists and tables look like:

<!DOCTYPE html>
 <html>
 <head>
 <title>Default HTML markup styling</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/
jquery.mobile-1.0a2.min.css" />

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-
1.0a2.min.js"></script>
</head>

<body>
<div data-role="page" id="home">
<div data-role="content">
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Table foot</td>

</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">David Green</th>
<td>New York City, NY</td>
<td>555-0123</td>
</tr>
<tr>
<th scope="row">Martha White</th>
<td>Los Angels, CA</td>
<td>555-0188</td>
</tr>
<tr>
<th scope="row">Bobby Brown</th>
<td>Washington, D.C.</td>
<td>555-0110</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

how-use-jquery-mobile-grid-and-columns-layout-img-2