How to create a JQuery Mobile page with responsive grids

Wednesday August 21, 2013 ()

This blog aims to demo examples on how to implement a responsive page targeting various handheld screen sizes. What we decribe here is similar to what we use in our XHTML JSF home page that uses JQuery mobile but is no different when applied to a JQuery mobile page in HTML.

Grids in JQM version 1.3.x is provided through pre-defined grid classes

ui-grid-a
ui-grid-b
ui-grid-c
ui-grid-d

Columns in the grid are represented by classes

ui-block-a
ui-block-b
ui-block-c
ui-block-d
ui-block-e

ui-grid-a is to have ui-block-a and ui-block-b. ui-grid-b should have three blocks, ui-block-a, ui-block- b, and ui-block-c. And so on.

JQuery mobile provide preset responsive grids through ui-responsive class. This feature class is ready to go if it is acceptable to have grid columns break at 560px (35em) and stacked to the bottom when screen size is less than to 560px. The example below shows how to use this preset responsive grid.

<div class="ui-grid-b ui-responsive">
     <div class=ui-block-a">
         <-- column content -->
     </div>
     <div class="ui-block-b">
         <-- column content -->
     </div>
     <-- more columns -->
</div>

Our custom responsive grid

Similar to what is described by the documentation, our custom responsive grids are accomplished through CSS styles. This helps us because the preset does not meet our requirements.

The following is a 3-column grid.

<style>
/*
When the screen is 30em and below, the column b is stacked below 
column a and column c is hidden.
*/
@media all and (max-width: 30em) {
    .home-breakpoint .ui-block-a,
    .home-breakpoint .ui-block-b {
        width: 100%;
        float:none; 
        // more styles
    }

    .home-breakpoint .ui-block-c {
        display: none;
    }
}


/*
When the screen is above 30em and below 48em, columns a and b 
are displayed beside each other,  column c is hidden.
*/
@media all and (min-width: 30.1em) and (max-width:48em) {
    .home-breakpoint .ui-block-a {
        width: 50%;float: left;
        // more styles
    }

    .home-breakpoint .ui-block-b {
        width: 50%;float: left;
        // more styles
    }
    .home-breakpoint .ui-block-c {
        display:none;
    }
}


/*
When the screen is above 48em all 3 columns are shown 
beside each other.
*/

@media all and (min-width: 48.1em) {
    .home-breakpoint .ui-block-a {
        width: 40%; float: left;
        // more styles
    }

    .home-breakpoint .ui-block-b {
        width: 40%;float: left;
        // more styles
    }
    
    .home-breakpoint .ui-block-c {
        width:20%;float: left;
        // more styles
    }    
}
</style>

Note that you may also add other styles to each columns/column elements corresponsing to each screen size.

The corresponding JSF Page

Below is our implementation with the preceeding styles put all together. Just replace <ui:repeat /> with however you build your content.

<div class="ui-grid-b home-breakpoint">
    <div class="ui-block-a" > 
        <ui:repeat value="#{homeBean.today}" var="blog"> 
            <div class="ui-corner-all">  
                <a href="#{blog.url}" rel="external">
                    <h3>#{blog.title}</h3>
                </a>
            </div>                   
        </ui:repeat>
    </div>
    <div class="ui-block-b">                            
        <ui:repeat value="#{homeBean.recent}" var="blog"> 
            <div class="ui-corner-all">
                <a href="#{blog.url}" rel="external">
                    <h3>#{blog.title}</h3>
                </a>       
                <!-- Content removed for clarity -->
            </div>   
        </ui:repeat>                            
    </div>
    <div class="ui-block-c" >                            
        <div class="popular_frame">
            <ui:repeat value="#{homeBean.popular}" var="blog"> 
                <!-- Content removed for clarity -->
            </ui:repeat> 
    </div>   
</div>

Content in the columns like images and videos may also be resized corresponsing to the size of the screen. The example below shows how an image contained in the grid column is resized corresponding to a screen size.

<style>
/*
Default image size and then resized when screen is below 800px (50em)
*/
.responsiveImage { border:0px;width:200px}
@media (max-width:50em) { 
    .responsiveImage {
       border:0px;width:120px;
    }
}
</style>

Note that the above CSS styles may also be defined inside the home-breakpoint class defined earlier if so desired.

That's it. Good luck.


3,379

Comments (How to create a JQuery Mobile page with responsive grids)