Extracting CSS properties from design objects in Fireworks using the CSS3 Mobile Pack

In this article you'll learn how to install the CSS3 Mobile Pack for Adobe Fireworks CS5 and CS5.1. You'll see how to work with the extension to extract the properties (rounded corners, opacity, and more) of a selected object and map the design to CSS3 for use on the web.

The extension contains two main features:

• jQuery Mobile theme skinning: Using the extension you can create themes for jQuery Mobile websites. The interface enables you to preview and export the corresponding CSS code and sprite assets. To learn more about using this extension, see Creating jQuery Mobile website themes in Fireworks using the CSS3 Mobile Pack.
• CSS Properties panel: The CSS Properties extension maps all the properties of a Fireworks object that can be represented in CSS. It lists the equivalent CSS properties in the CSS Properties panel.

This article covers how to work with this latter feature in the extension.

Visual designers usually design websites with a design tool, such as Adobe Fireworks CS5 or later. After the design is approved, the design file is often sent to a web designer. The web designer uses the static design to translate it to a web page using HTML, CSS, JavaScript, and various image assets. If a design cannot be represented using CSS code alone, image files are exported as slices and stitched together using HTML and JavaScript.

As CSS3 gains momentum and support in modern browsers, many design aspects can be represented purely by using CSS. You can use the CSS3 Mobile Pack to install the CSS Properties panel and simplify this sometimes tedious process. Using the CSS Properties panel, you can extract the design properties of objects in Fireworks that can be represented in CSS. In this example, you'll see how the extension reduces the effort that is normally required when manually translating graphic effects to browser-specific CSS properties.

You'll use the CSS Properties panel to map all the properties of a Fireworks object that can be represented in CSS. After the desired object is selected, the panel lists the extracted properties in the CSS Properties panel. You'll discover that many design characteristics—such as rounded corners, gradients, drop shadows, and transformations that you create in in Fireworks—can be easily translated to CSS.

The extension also lists browser-specific CSS properties in order to maintain design consistency in the most popular browsers such as Mozilla Firefox, Google Chrome, Apple Safari, Opera, and Microsoft Internet Explorer.

1. Before you can use the CSS Properties panel you'll need to download the CSS3 Mobile Pack and install it:
2. Quit Fireworks if it is currently running.
3. Download the CSS3 Mobile Pack package for CSS Properties.
4. Launch the Adobe Extension Manager as an administrator. (On Windows Vista and Windows 7, you must have administrative access to your computer to install it.)
5. Click the Install button to install the extension.
6. Browse to select the extension package named FireworksHTML5pack.zxp.
7. While the extension is selected, click Open to begin the installation process.
8. After successfully installing the extension, restart Fireworks so that the changes can take affect.

At this point the extension is now installed on your machine with the updated functionality.

Using the CSS Properties panel in the Fireworks extension

After installing the extension, the new panel interface in Fireworks will display the CSS properties of a selected object on the canvas. To see how it works, either create some new artwork on the canvas or open an existing PNG file to work with a site's design. You'll select an object on the canvas in order to extract its CSS properties:

1. Open the CSS properties panel by selecting Window > Extensions > CSS Properties (see Figure 1).

The CSS Properties panel appears. The different sections of the panel are identified in Figure 2.

2. Click the Refresh button in the CSS Properties panel to see the list of CSS properties display for the artwork that you've selected (see Figure 3).

3. To copy the CSS Properties for the artwork, choose from one of the following options:

• To select and copy all of the extracted properties, click the Copy All button.
• To select a subset of properties, press Shift while clicking the desired rules—or press Control+click (Windows) or Command+click (Mac) to select the desired rules—and then click the Copy Selected button.

Using this approach, you can extract the CSS properties and copy the rules in order to paste them into a CSS file of your choice. Open the CSS stylesheet of a website in Adobe Dreamweaver CS5 or later. After pasting the new styles, return to the HTML page and press the Live View button in the top of the Document window. Live View enables you to preview the page as it appears in a browser. Alternatively, choose File > Preview in Browser to view the HTML page in a browser to test it. The design object will appear exactly as it was displayed in Fireworks.

Considerations when extracting properties of design objects as CSS code

When you are working with the CSS3 Mobile Pack to extract CSS properties from Fireworks design objects, there are a few restrictions. Be advised of the following limitations:

• The CSS Properties panel does not refresh automatically when you select a different object on the Fireworks canvas. To update the list of rules, click the Refresh button every time you make a new selection.
• The CSS Properties Panel is a fixed size; it cannot be expanded to larger dimensions.
• At the time of this writing, the extension is available in English only.

The new functionality to extract CSS rules from graphic artwork in Fireworks CS5 or later will effectively increase your web design workflow as you produce pages. Using the CSS Properties panel, you can quickly see which design characteristics are supported in CSS3. (Not all CSS3 properties can be represented in Fireworks; it shows only the CSS3 properties than can be mapped.) By simply copying the generated rules, you can update sites to use the industry-standard code with minimal effort. Additionally, the CSS is compatible across browsers to ensure that the site will load quickly and appear as expected when you launch the live site.

To learn more about the CSS3 Mobile Pack, read Creating jQuery Mobile website themes in Fireworks using the CSS3 Mobile Pack, and watch the Fireworks senior product manager, Takashi Morifusa, demonstrate the CSS3 Properties panel and jQuery Mobile theme skinning tool. Also be sure also to check out the HTML5 and CSS3 Development Center.