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

Classes
class | component | notes |
---|---|---|
lotusFrame | container "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. |
lotusBanner | banner | This is the part of the UI the customer can customize. Contains primary navigation. |
lotusTitleBar | title bar | contains secondary navigation and search |
lotusPlaceBar | place bar | not always present. Sits under the title bar. |
lotusMain | main area | this contains the main data, in one or more columns, It is a wrapping div for the columns. |
lotusColLeft | navigation area | Contains tertiary navigation (menu, filters). |
lotusColRight | sidebar | Contains extra information pertinant to the page you are on (lists). |
lotusContent | content | contains the main data for the page |
lotusFooter | footer | contains relevant links for the page |
lotusLegal | legal information | Legal 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
- Three columns, summary view
- Three columns, with sections
- Two columns, grid view
- Two columns, detail view
- One column (the width is controlled by css, not by leaving an empty right column)
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.