jQuery Mobile is an awesome framework for developing mobile websites with common touchable interfaces. All it takes is some proper markup and importing a few JS and CSS files to display your website in a mobile-friendly way. Let's explore how to get a basic page set up and create our own custom theme for the framework.

To get started, or to dive in deeper, check out the documentation, appropriately done in jQM.

Page Structure Markup

jQM takes advantage of HTML5's data- attribute, and we need to be aware of these attributes in our markup. The basic page structure of a page will look like this. You'll notice in the head we include the necessary jQM JS and CSS files, a necessary meta tag setting the viewport width and then in the body we have a few sections marked up with data-role attributes. These data-role attributes essentially tell jQM what classes to add to that element to style it correctly, and if you look at the page source after jQM gets done manipulating it, you'll see all of those added classes.

To get a better idea of how everything is styled in jQM, let's take a look at a page with a mix of jQM data-roles and elements. On this page, the default jQM theme is being applied to a page of basic marked up elements using the "data-role" attribute to tell jQM how they should be treated.

Basic Theme Application

Out of the box, jQM has 5 different themes which we can set on a page level and override on an individual element level. By simply adding data-theme=”e” (or a, b, c, d or e) to our page element:

You'll see that every element within that container gets the designated theme's ui- classes, and now our page looks like it got the Midas touch. If we want to mix and match the provided themes, simply supply the data-theme=”x” attribute on a supported element, and we can apply the rules of element parent inheritance. That's all great when we want to mix and match styles from the supplied themes, but now let's take a look at how we can customize these elements even further to create our own theme.

Custom data-theme

To create a custom theme, we could always add our own custom classes and ids to existing elements to target with CSS. This will work great for some elements, but you'll find it difficult in many instances to override and work with all of the inherited classes added to an element by jQM. Instead of trying to force an override by adding new unnecessary attributes, let's separate our theme, and make it applicable via the data-theme attribute. We know that jQM themes elements by adding appropriate classes indicated by our data-role and data-theme attributes, so let's use their existing CSS and class framework to our advantage. If we simply use data-theme=”v” on our element, you'll notice instead of a theme letter, the value just gets appended to the ui classes in place of a letter:

Visceral

or

	 Button

Be sure to use a single letter here, because jQM will only use the first letter on inheriting elements. To make sure our overrides work consistently, let's just modify some code from their existing stylesheet. I copied one of their CSS theme blocks into my own stylesheet, replaced the theme letter with my custom data-theme value, and imported it after the jQM CSS file. Now, I have a custom data-theme which I can apply and which will allow me to control the look of my mobile site without battling jQM's existing framework.

Take a look at how we used this technique to create the mobile version of the Visceral website.