Quick Start Guide
These instructions are to give you a quick look at developing using the Lotus User Interface code base.
Coding Philosopy
Our One UI code has been developed using the latest thinking in web coding. More details about the One UI coding philosophy can be found in the developer guide, on the Coding Philoshopy page.
Requirements for Using One UI
- Link the files in the proper order into the head section (as defined in the developer guide, 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 developer guide, Build a 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 (code for this is in the developer doc on the Accessibility page)
- Use the html found in the component samples so things get styled properly.
Other guidelines
- Don't use inline styles, use your product style sheet to override One UI 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 One UI components to apply your own modifications in your custom style sheet.*
- You can add IDs to your One UI elements to allow you to target the component using javascript (each ID must be unique on the page).
*One UI 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 One UI (current or future) classes.
The CSS
- Most of the styles for One UI are found in core.css
- Styles relating to theming (colors, background images) are found in defaultTheme.css
- Any custom styles for your product or overrides to the One UI styles should be placed in a style sheet you link in after all the One UI files.
- One UI makes generous use of multiple styles and css inheritance to keep down our style definitions.
Different types of One UI styles
- Reset styles - are used to make elements look the same across browsers
- Base styles - are used to set base styling for common things 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 One UI components, grouped by component
- Layout styles - styles used for the frame of the page and for special types of pages (like about, login)