Quick Start Guide

These instructions are to give you a quick look at developing using the Lotus User Interface code base. Use the navigation area on the left to read more detailed information.

Coding Philosopy

Our code has been developed using the latest trends in web coding. More details about the coding philosophy can be found on the Coding Philoshopy page.

Requirements

• Link the files in the proper order into the head section (as defined in the Linking the CSS Files section)
• Use IE conditional comments to assign ie-specific classes to your html tag - these allow you to pick up all the IE adjustments needed to get the UI to look right (see Create a New Page section)
• Assign lotusui to your body tag (more about namespacing)
• Assign lotusImagesOff to your body tag as an additional class when in high contrast mode (sample code for this is on the Accessibility page)
• Use the sample HTML found in the component samples so elements get styled properly.

Other guidelines

• Don't use inline styles, use your product style sheet to override styles. Inline styles are harder to change. (The only place it might make sense to use an inline style is setting a custom width for a dialog.)
• You can add additional classes to components to apply your own modifications in your custom style sheet.*
• You can add IDs to your elements to allow you to target the component using javascript (each ID must be unique on the page).

*Lotus User Interface uses the "lotus" prefix for it's class names, so as not to collide with customer or product classes. Products should also select a namespace for their class names so as not to collide with customer or Lotus User Interface (current or future) classes.

The CSS

• Most of the styles are found in core.css
• Styles relating to theming (colors, background images) are found in <themeName>Theme.css (for example, defaultTheme.css)
• Any custom styles for your product or overrides to the styles should be placed in a style sheet you link in after all the Lotus User Interface files.
• Lotus User Interface makes generous use of multiple styles and css inheritance to keep down our style definitions.

Different types of styles

• Reset styles - are used to make elements look the same across browsers
• Base styles - are used to set base styling for common elements such as links, inline lists
• Helper styles - are styles that can be applied to elements for helping to tweak the UI (alignment, some general visuals)
• Marker styles - are styles that are applied to either the html tag or body tag to help with cross-browser issues, high contrast accessiblity, or theming.
• Component styles - the styles used for our components, grouped by component
• Layout styles - styles used for the frame of the page and for special types of pages (like about, login)