wizard

This partial refers to a a frequently used design pattern of a wizard.

.wizard

lines 6-41 reference classes wrapping the steps of the wizard

The css within assumes that you'll be using the layout grid to structure your wizard. You of course should use whatever layout structure that best matches the needs of your design.

Wizard Steps

A wizard design pattern is made up of 3 distinct steps: un-visited steps, the current step and visited steps. Each is styled to be distinct from each other. Typically each of these steps is made of two parts, the step title and step number.

Unvisited Steps

lines 42-68

All the styles are defined initially here and the cascade is used to utilized to limit extra code. .wizard-step-number and .wizard-step-title are applied to all the steps.

Current Step

lines 70-78

.wizard-step-active is added only to the step that represent the current page

Current Step

lines 79-86

.wizard-step-visited is added all steps before the current page.