Create a new page

  • Use a prototyping template as a starting point
  • Delete the left and/or right columns if you don't need them
  • Modify:
    • the title of your page
    • your application links
    • your action buttons or navigation tabs
    • your search scope options
  • Add components, using the component and example sections of this document
  • Use helper styles in your HTML if you need to tweak the layout
  • Put any style overrides in an application-specific css file

This section assumes you are building a page from scratch. For a discussion of inserting components into your existing page, see more about namespacing.

Layout

A page can have a 1, 2 or 3 column layout. You will find a template.htm page in the examples folder of this documentation. This is the HTML that makes up the template. This is the skeleton of your page.

The default layout has a minimum and maximum width. For alternate layouts, see Frame for more information.

Doctype

The first part of the template is the doctype. The HTML and CSS in this documentation are built and tested using the XHTML transitional doctype. For more discussion about the doctype requirements, see The Doctype section of the Coding Guidelines.

Head

The head section contains the title of the page (which you will have to modify) and links in all your javascript and css files. The order in which these files are linked is important.

Conditional Comments

Conditional comments are used to facilitate creating hacks for IE browser differences. What this code does is give you some class names (assigned to the HTML tag) to use for declaring hacks. They will be written out if the user is using an IE browser. The lotusui_ie class can be used to qualify your CSS for any IE browser. The lotusui_ie6 class can be used to target the IE6 browser (in place of the * HTML hack). The lotusui_ie7 class can be used to target the IE7 browser.

This is the code:

 <!--[if IE 6]>
  <script type="">
     document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie6";
  </script>
 <![endif]--> 
 <!--[if IE 7]>
  <script type="">
     document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie7";
  </script>
  <![endif]--> 
  <!--[if IE 8]>
   <script type="">
     document.getElementsByTagName("html")[0].className+=" lotusui_ie8";
   </script>
 <![endif]-->
 <!--[if IE 9]>
   <script type="">
     document.getElementsByTagName("html")[0].className+=" lotusui_ie9";
   </script>
 <![endif]-->

IMPORTANT: In Internet Explorer 8, conditional comments cause performance issues because they block downloads until the main stylesheet loads. To solve this, put the following empty conditional comment at the top of the head section, before any css files are linked.

<!--[if IE 6]><![endif]--><!--fixes IE8 performance issue of conditional comments blocking css download-->
More information on this issue can be found here

Body

The body tag has the lotusui30 classes assigned to it (more about namespacing).

There is code to facilitate detecting High Contrast or images turned off. This code puts the "lotusImagesOff" class on your body tag to use for declaring CSS for high contrast.

This is also where you can assign application specific classes, which allow you to override styles or create new styles. You would do that by linking an application-specific stylesheet to your head section after all other style sheets and putting your style overrides in there, qualified by the class you added to the body tag.

Frame

There is a div assigned a class of lotusFrame that surrounds the rest of the content in the body. Additional layout classes can share this DOM node for fluid or fixed-width layouts (more about namespacing).

The Banner

The banner contains your logo, application links (primary navigation), and utility links. You can have as many or as few applications as you need. The user's name shows up in the utility links.

The banner also contains your skip to link to the main content of the page, which skips to the lotusContent div of the page.

Title Bar

The Title Bar contains secondary navigation - in the form of tabs - and a search control. The search control allows you to scope your search.

Both the banner and the title bar are created using 3 nested divs, to allow for flexibility of design changes.

Main Section

The main section is where content goes. It can be made up of 1 to 3 columns.

You add the appropriate components to each of the columns. The lotusContent column always exists. The other two columns are optional.

Left Column

Typical components that go in the left column are the menu — which is the third level of navigation, one or more sections, and sometimes a tips box. If there is a menu in the left column, it should be the first component.

If there is no menu, the first component in the column needs an additional class called lotusFirst assigned to it, which gets rid of the top margin of the component (e.g. div class="lotusSection lotusFirst").

If you want to keep the space of the left column on your page, even if you aren't using it for components, you can leave the lotusColLeft container div in place and empty.

Right Column

The right column behaves the same as the left column, except it won't typically contain a menu. So whatever component it has (sections or tips) as the first component needs the lotusFirst class assigned to it.

You can leave the empty right column for whitespace, fill it with components, or delete it.

Content Column

The lotusContent column is where the primary data of your page goes. It typically contains components in this order:

  1. Breadcrumbs (optional)
  2. Header (required)
  3. Any messages (info, warning, alert, confirmation)
  4. Data for the page, usually in the form of a table/list of entries, with components as follows:
    • Action bar (contains any action buttons and view controls) (optional)
    • Top Paging Controls
    • Sort controls (optional)
    • Your table of data
    • Bottom paging controls
  5. Other components found in this area are forms, sections and/or tabs (to help organize information)...

Footer

The footer is a table of links that are relevant to your application. These will vary by application.

Legal

The bottom of the page contains some legal information.

Popups

The last section of the code, outside of the frame and inside the body tag, contains absolutely positioned components that are used by the page - like help popups, action menus, light boxes, that are hidden to the user until they are triggered by an event.

Components

Many components have been mentioned in the above sections. The component section of the web documentation has working examples of the components, as well as an explanation of how to use them.