Chapter 6

Formatting Content with Grids and CSS Gradients

Mobile applications often use grids for content that needs to be flexible and grouped into sections. jQuery Mobile's responsive grid is a useful solution for designs that require this behavior. In this chapter, we will review the basics of the jQuery Mobile grid component and show several examples of how we can style icons, graphics, and text in our grids. We will also create collapsible content blocks and discuss the advantage they provide when compared to an inline page structure. Lastly, we will add a bit of polish to our designs with CSS gradients and discuss the advantages that CSS gradients provide in regards to performance and progressive enhancement.

Get Pro jQuery Mobile now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.