by Michael Dominic

Created

January 3, 2012

This blog is the first in series of five blogs dedicated to “jQuery Mobile Theme Skinning”, a new feature in Fireworks CS5 that is part of the CSS3 Mobile Pack extension.

  1. Introduction to jQuery Mobile Theme Skinning extension and jQuery Mobile framework
  2. Creating a new jQuery template
  3. Previewing the jQuery Mobile design
  4. Exporting the design to CSS
  5. Creating a jQuery Mobile webpage in Dreamweaver and using the exported CSS file in the new web page

jQuery Mobile Theme Skinning

The jQuery mobile theme skinning is part of the CSS3 Mobile Pack extension for Fireworks. This extension enables you to create or update the theme of a jQuery Mobile website using Fireworks.

In Fireworks, a template with all the modifiable design aspects for jQuery Mobile is provided. After modifying the themes present in the template, you can preview the look and feel of the themes using an in-app preview or a browser, and export the corresponding CSS code along with the sprite assets.

jQuery Mobile Framework

The jQuery Mobile Framework is a JavaScript framework that allows you to quickly build websites for mobile devices. It is a touch-optimized web framework designed for smartphones and tablets.

jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. The jQuery Mobile Framework is easy to use and includes web-specific controls such as buttons, sliders, list elements, and many more.

When you build mobile websites with the jQuery Mobile Framework, you can leverage the default theme set provided with the framework. To learn more about how the default theme works, read the jQuery Mobile Framework Theme Documentation.

Themes and Swatches

jQuery mobile pages consist of a set of design objects that can be modified before they are used in a web page. For example, bars, buttons and body are design objects whose styles can be modified. Styles for design objects such as lists, slider, select menus are derived from one of these design objects.

A theme includes a collection of swatches. Each swatch consists of styles for a bar, content block and various button/list interaction states. You can mix and match the bars, blocks, and buttons among the swatches on a page for more combinations. By default, design objects in a jQuery mobile page use different styles for different objects. For example, the body is uses swatch “c” and button uses swatch “a”.

Note: jQuery recommends that you limit the number of swatches to 26 (a-z).

Benefits of the jQuery Mobile framework

  • jQuery Mobile uses CSS3 properties to create rounded corners, box and text shadows, and gradients. Using CSS3 properties instead of images is advantageous because it reduces the size of the theme file and the number of server requests.
  • Themes include multiple color swatches, each consisting of a header bar, content body, and button states that you can freely mix and match. These swatches enable you to create visual textures and richer designs.
  • Open-ended themes support up to 26 unique swatches per theme. This makes it possible to add almost unlimited variety to your designs.
  • All backgrounds now use CSS3 gradients to dramatically reduce the file size and number of server requests to improve performance.
  • To reduce image size, a simplified icon set includes elements most commonly used for mobile in a sprite.

Resources

Share on Facebook