Framework

The framework is the structure of the page that data sits in.

Framework image with callouts

Classes

classcomponentnotes
lotusFramecontainer "frame"This wraps the entire page and gives us more flexibility with our layout. Additional layout classes can share this DOM node like lotusFluid or lotusFixed for fluid or fixed-width layouts.
lotusBannerbannerThis is the part of the UI the customer can customize. Contains primary navigation.
lotusBannerExtbelow bannerContains the optional breadcrumb.
lotusTitleBar2title barContains secondary navigation and search.
lotusTitleBarExtbelow title barContains action links.
lotusMainmain areaThis contains the main data in one or more columns. It is a wrapping div for the columns.
lotusColLeftnavigation areaContains tertiary navigation (menu, filters).
lotusColRightsidebarContains extra information pertinant to the page you are on (lists).
lotusContentcontentContains the main data for the page.
lotusFooterfooterContains relevant links for the page.
lotusLegallegal informationIf this is on the page, it sits under the footer.

Basic Implementation

The outermost div is the lotusFrame. Inside it you'll find the following, in the following order: banner, extended banner for the breadcrumb, title bar, extended title bar for the action links, main area, footer, and legal information (optional).

Within the main area, the following divs appear in this order: lotusLeftCol, lotusRightCol, lotusContent. On screen they appear as left column, content, right column.

Variations

You can leave the left and right columns in place with no data to keep the space they occupy free, or you can remove them. The center column is always there.

See individual components for more information.

Examples

See a template to understand how to construct a page. Additionally, read the information on the pages listed in the See also section below.

The page was initially layed out using ids rather than classes (because each part of the page structure was unique. This has caused some issues, programmatically, so we have switched to using classes. Please use classes moving forward, because the ids are obsolete.

1/24/11: The place bar was removed and action buttons were added to the title bar.

September 2011: An optional breadcrumb was added between the banner and title bar. Action buttons were moved to action links that are below the title bar.

See also: