Home » jQuery Mobile

Theming jQuery Mobile application or styling | built in themes

2 March 2011 No Comment
Share on Facebook

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

  • Usability
  • Accessibility
  • 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:


<div data-role="page" data-theme="c" id="my-page">



more about jQuery Mobile Design Elements: http://jquerymobile.com/designs/


We don't share your email anywhere, grab our rss via feedburner

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.