Book Image

jQuery Mobile First Look

Book Image

jQuery Mobile First Look

Overview of this book

Table of Contents (17 chapters)
jQuery Mobile First Look
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using columns and grids


Even with no additional CSS code, jQuery Mobile formats our content in a simple, yet clean way. This also makes the text easier to read on mobile devices.

During the development of our web application, there might be times when we just need to place certain elements in a particular position, which would require a certain fluency in CSS (which we might not have).

Thankfully, jQuery Mobile provides a quick way to create a sort of grid layout: it applies a set of CSS rules with which we are able to obtain columns and rows to display our content as if it was in a table:

The page pictured above shows a 3x3 grid themed with Swatch B colors applied.

Note

The use of grids, though perfectly legitimate, is somewhat discouraged, due to the narrow screen width, which is a feature common to all the mobile devices.

In short:

  • They are useful for displaying any sort of content which needs to be presented side-by-side (buttons and navigation bars are an example)

  • They have no margins, no padding...