Child pages
  • Infusion Builder v2.0 Design and Wireframes

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Table of Contents


Download images used in the wireframe and for styling.


  • Each images follows a sequence to illustrate each scenario.
  • Items categorization has changed. It will be Framework, Components, and Third Party. (-JH, Feb 10, 2011)

0. Wireframe without Descriptions

The following is the entire Builder v2.0 wireframe without descriptions.

1. Initial View

Image 01

2. Making Selection with Dependencies

User wants to download Inline Edit.

Image 02:

  • Keyboard navigate to the first selectable item.
  • Focus styling applied to first item. See #itemStlying.

Image 03:

  • Mouse hover over Inline Edit.
  • Focus remains on first item (focus doesn't change on hover).

Image 04:

  • Inline Edit is selected.
  • Dependencies become selected.
  • Labels for selected items get added to the "Items in Package:" list.
  • Focus style applied to Inline Edit.
  • Selected style applied to selected items. See #itemStlying.

3. Excluding a 3rd Party Module

User has selected Inline Edit, but wants to exclude jQuery.

*Image 05: *

  • Mouse hover over jQuery.
  • Hover style applied. See #itemStlying.

Image 06:

  • jQuery is un-checked.
  • if item unchecked is required by current checked items:
    • Hover and Focus style is applied. See #itemStlying.
    • the names of the items requiring the excluded item get listed.
  • jQuery added to the "Omitted Recommended Items:" list

4. Making a Selection That Includes an Excluded Item

User has excluded jQuery, and now wants to include Pager.

Image 07:

  • User keyboard navigates to Pager.
  • Focus style applied to Pager. See #itemStlying.

Image 08:

  • Pager selected.
  • All Pager dependencies selected, includes the previously excluded jQuery.
  • Focus and Selected styles applied to Pager. See #itemStlying.
  • Selected style applied to other items. See #itemStlying.
  • Renderer, XML Parser, and jQuery added to "Items in Package" list.
  • jQuery removed from "Omitted from Recommended Items" list.

5. Excluding a Required Fluid Infusion Component

Image 09:

  • User unchecks Infusion Framework.
  • Required and Focus style applied. Notice Hover is not applied because it's a keyboard interaction. See #itemStlying.
  • Names of the items requiring the excluded item get listed in the order they appear from top to bottom.
  • Infusion Framework added to "Omitted from Recommended Items" list.

6. Undoing a Selection

User has selected Pager previously, but decides to remove it.

Image 10:

  • User uses mouse to uncheck Pager.
  • jQuery becomes unchecked again as it was unchecked before Pager was selected in Image 09 above.
  • any unneeded dependencies of Pager become unselected (i.e. Renderer and XML Parser).
  • Focus and Hover style applied to Pager. See #itemStlying.
  • jQuery and Infusion Framework added to "Omitted Recommended Items" list.

7. Downloading

Image 11:

  • Mouse hover Minified Package download button. See #itemStlying.

Image 12:

  • Download is being prepared.
  • Button label is replaced with a new message and a spinner.
  • Other interactive components on the Builder is disabled (checkboxes, Select All / Reset disabled).

Select, Hover, Required Item Styling

hover-select-focus-style-01 to 04

  1. Default style.
  2. Focus using keyboard. Applied styles: Focus.
  3. Selected using keyboard. Applied styles: Focus, Selected.
  4. Focus removed. Applied styles: Selected.

hover-select-focus-style-05 to 08

  1. Default style.
  2. Hover using mouse. Applied styles: Hover.
  3. Selected using mouse. Applied styles: Focus, Hover (overrides Selected).
  4. Focus removed. Applied styles: Selected.


  • Required style applied.

  • Required style applied with Focus styling.

  • Hover over required item. Applied styles: Hover (overrides Required).

  • Styling markup

  • Download button styles
  • No labels