by Michael Dominic
In this post let’s generate the jQuery CSS and sprites from the skinned jQuery templates. There are two options available to export the required assets.
- Export both CSS and sprites at one go.
- Export Sprites or individual swatch CSS.
Export both the CSS and sprites
Select Commands > jQuery Mobile > Export Theme to generate the swatches for all the pages along with the sprites. The CSS file with all the swatches along with the Sprites is exported to the desired location.
Export a specific swatch or sprite individually
Select Export Current Swatch in the jQuery Mobile Theme Preview panel.
The CSS exported for an individual swatch consists of classes related only to a single swatch page. A jQuery page can consist of as many swatches as required. This command is particularly helpful in cases where you already have the webpage built using default jQuery Mobile swatches and you are interested in including few additional swatches (x,y,z,etc.,) for special cases.
Modify and export sprite images
- Select the “Export Sprites” option to export the sprites to a specific location.
This option can be used when you want to modify and export only the sprite images. In the example provided, I wanted 2 back buttons-a yellow and a red. So, I deleted one of the sprite images that wasn’t in use and replaced it with another red back button.
Download CSS3 Mobile pack from here.
Article on Creating jQuery Mobile Websites themes in Fireworks using CSS3 Mobile Pack on Adobe Developer Center.Share on Facebook