Skip to: content, navigation

How to use the program

Action buttons

The purple action buttons are dotted throughout the form, with some of them duplicated in several places. The actions fall into two groups - controlling the demo, and the generated output:

Demo buttons

Save

Save the current settings and update the demo.

The data is saved to session information, so your design will persist throughout this site. But there is no persistence beyond the session - if you want to come back to your design in the future, ensure that you generate configuration data for it before leaving the site.

Preview
This feature is only available in Opera 7+ or recent Mozilla browsers with scripting enabled

Preview the current design settings without saving.

This action doesn't require a postback, so it's obviously faster than saving after every change. Nonetheless I still recommend saving on a regular basis, because unsaved changes will be lost when leaving the generator.

Load

If you've specified any Input configuration, press this button to load it into the program.

Loaded data is automatically saved and previewed, overriding all previous design settings.

Generator buttons

Generate CSS

Preview and generate CSS for the current design.

For more about the generator options, please see the Output settings documentation.

Generate config

Preview and generate configuration data for the current design.

The data is saved in the form of a javascript object-literal, which you can re-import at a later date to carry on working on a design. For more about this, please see the Input configuration documentation.