Theming jQuery Mobile application or styling | built in themes
jQuery mobile themes are built around new object-oriented CSS framework. While creating or designing a mobile application or mobile we site we should consider
- should convey the information to user with in small screen
- use of color..
Themes of jQuery mobile are light weight and it uses:
- CSS3 properties to add rounded corners, box and text shadow and gradients instead of images.
- CSS3 properties to gradient background instead of images resuzed server overhead.
Built in themes and swatches:
There are 5 built in themes defined by a,b,c,d,e
- “a” is the highest level of visual priority (black in our default theme).
- “b” is secondary level (blue).
- “c” is the baseline level (gray) that we use by default in many situations.
- “d” for an alternate secondary level.
- “e” as an accent swatch.
Example code to add a theme to mobile application:
<body> <div data-role="page" data-theme="c" id="my-page"> </div>
more about jQuery Mobile Design Elements: http://jquerymobile.com/designs/