Friday, May 04, 2012

Default jQuery Mobile CSS

Before you start experimenting or working with the CSS file that comes with jQuery Mobile pages you might find it useful to keep the following URL handy: http://code.jquery.com/mobile/latest/jquery.mobile.css.

This URL leads to the jQuery Mobile CSS file. A version of the jQuery Mobile CSS file is included when Dreamweaver CS5.5 generates a jQuery Mobile starter page. If you look at the CSS file that opens when you generate a jQuery Mobile page in Dreamweaver CS5.5, you will see that it is 1.0a3/jquery.mobile-1.0a3.min.css. Alternatively, an updated version of the CSS file that has been released since Dreamweaver CS5.5 incorporated this CSS file.

There are two good reasons to go online and grab the latest version of the jQuery Mobile CSS if that is an option. For one thing, it is periodically updated. The other is that if you corrupt the version of the CSS file that comes with Dreamweaver, something I have found quite easy to do, you can simply go to the link above, copy and paste the CSS code, and use that to create a "clean" CSS file to use when you build jQuery Mobile pages from scratch.

The CSS file you download will have a slightly different file name than the one provided with Dreamweaver, reflecting the current version. Once you download the new CSS file, you can save that CSS file with your own name to create customized CSS for your jQuery Mobile pages.