Skip to main content link. Accesskey S

Framework

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

Sprites: Directionality:
Framework image with callouts

Classes

classcomponentnotes
lotusFramecontainer "frame"This gives us more flexibility with our layout. It is where we set a minumum width for our UI. It wraps the entire page.
lotusBannerbannerThis is the part of the UI the customer can customize. Contains primary navigation.
lotusTitleBartitle barcontains secondary navigation and search
lotusPlaceBarplace barnot always present. Sits under the title bar.
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 informationLegal information. If this is one 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: the banner, the titlebar, the placebar (optional), the main area, the footer, legal information (optional).

Within the main area, the following divs appear (in the code) 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 Basic 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.

See also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.