Quick Start Guide

These instructions are to give you a quick look at developing using the ICS UI code base. Use the side navigation 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 correct (see Create a New Page section)
  • Assign the correct lotusui30 classes (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).

*ICS UI uses the "lotus" prefix for its 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 ICS UI (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 ICS UI files.
  • ICS UI 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 and 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 and login)