Markers and Namespaces

Special marker and namespace classes are used in the DOM to help activate styles under certain conditions and to scope the areas of the page to which styling applies.

Marker Classes

Marker classes are used at the top level of the DOM. Browser detection classes are applied to the HTML element. The high contrast detection class is applied to the BODY element. Marker classes are used to help us do special things in our markup, like avoiding use of browser-specific CSS syntax hacks or providing alternate text for background images when in high contrast mode. The following marker classes are used:

Class Applied to What it does
lotusui_ie HTML tag Allows you to qualify styles to target Internet Explorer 6 and Internet Explorer 7 browsers (Roughly equivalent to dj_ie marker used by Dojo. Not all IE browsers get lotusui_ie at this time.)
lotusui_ie6 HTML tag Allows you to qualify styles to target Internet Explorer 6 (equivalent to dj_ie6 marker used by Dojo)
lotusui_ie7 HTML tag Allows you to qualify styles to target Internet Explorer 7 (equivalent to dj_ie7 marker used by Dojo)
lotusui_ie8 HTML tag Allows you to qualify styles to target Internet Explorer 8 (equivalent to dj_ie8 marker used by Dojo)
lotusui_ie9 HTML tag Allows you to qualify styles to target Internet Explorer 9 (equivalent to dj_ie9 marker used by Dojo)
lotusImagesOff BODY tag Triggers any text wrapped with the class of lotusAltText to show (equivalent to dj_a11y marker used by Dojo)

See the Create a New Page section for a code sample of applying the browser detection classes. See the Accessibility section for a code sample of applying the high contrast class.

Namespace Classes

Namespace classes are used to scope styling to certain areas of the page and to enable different versions of the CSS to be used in different components in the same page. The following namespace classes are used:

Class Applied to What it does
lotusui30_body BODY tag Namespaces styles for the BODY, lotusMain, and lotusFrame elements only.
lotusui30_fonts BODY tag Specifies default font settings for the entire page.
lotusui30_layout Same element as lotusFrame Namespaces styles for layout containers such as lotusColLeft, lotusColRight, lotusContent.
lotusui30 BODY or any island wrapper Applied to the parent element of any component turning that wrapper into an island. For a full page integration scenario (see below), it is applied to the BODY tag. All islands pick up the default font declarations of the page.

Nesting of namespace classes is not tested and is not recommended.

Layout Classes

Layout classes are used to trigger page layouts other than the default that has a minimum and maximum width:

Class Applied to What it does
lotusFluid Same element as lotusFrame Provides a fluid-width layout.
lotusFixed Same element as lotusFrame Provides a fixed-width layout.

lotusui30 on the <body> tag and IE6 High Contrast Support

In versions of ICS UI prior to 3.0.0, the lotusui30 class was supported directly on the BODY tag. However, addition of support for multiple integration scenarios (see below) combined with IE 6's lack of support for multiple classes on the same DOM node in a single CSS selector, required no longer supporting the lotusui30 class on the BODY tag. This was because proper namespacing of the high contrast detection classes required three DOM nodes for correct specificity. Take the following CSS declaration as an example:

.lotusui_ie6 .lotusImagesOff .lotusui30 .lotusFooComponent {
    /* alter UI for high contrast in IE6 for lotusui30 without affecting other versions of lotusui loaded on the page */
}

<html class="... lotusui_ie6 ... ">
  <body class="... lotusImagesOff ...">
    <div class="... lotusui30 ...">
      <div class="lotusFooComponent">
        component markup here
      </div>
    </div>
  </body>
</html>

Requiring lotusui30 to not be on the BODY tag was a barrier to upgrading ICS UI versions. To overcome that barrier and allow lotusui30 on the BODY tag, version 3.0.1 introduces additional selectors using multiple classes on the same DOM node. Now, high contrast declarations look like this to support the full page and island scenarios:

.lotusui_ie7 .lotusui30.lotusImagesOff .lotusFooComponent, .lotusui_ie7 .lotusImagesOff .lotusui30 .lotusFooComponent { 
    /* alter UI for high contrast in IE7 for lotusui30 without affecting other versions of lotusui loaded on the page */
}

<html class="... lotusui_ie7 ... ">
  <body class="... lotusui30 lotusImagesOff ..."> <!-- Full page scenario -->
    <div class="lotusFooComponent">
      component markup here
    </div>
  </body>
</html>

<html class="... lotusui_ie7 ... ">
  <body class="... lotusImagesOff ...">
    <div class="... lotusui30 ..."> <!-- Island scenario -->
      <div class="lotusFooComponent">
        component markup here
      </div>
    </div>
  </body>
</html>

Products that need to support IE 6 in high contrast mode can continue using the full island scenario introduced in version 3.0.0.

Integration Scenarios

The different namespaces provide options that enable support of three different integration scenarios when building pages:

  1. Full Page - In this scenario, the entire page uses the same level of CSS. 
    <body class="lotusui30_body lotusui30_fonts lotusui30">
  <div class="lotusFrame lotusui30_layout">

                Banner markup goes here
                Titlebar markup goes here

    <div class="lotusMain">
      <div class="lotusColLeft">

                Content markup goes here
...
      </div>
    </div>
  </div>
...
  2. Aggregated Page - In this scenario, the banner, footer, navigation and page layout uses one version of the CSS, and individual content areas of the page come from a different source that may use a different version of this CSS, an entirely different CSS library, or no CSS at all. Various lotusui version islands are used on the page depending upon what is required by each component. 
    <body class="lotusui30_body lotusui30_fonts">
  <div class="lotusFrame lotusui30_layout">
    <div class="lotusui30">
                Banner markup goes here in this island
    </div>
    <div class="lotusui30">
                Titlebar markup goes here in this island
    </div>
    <div class="lotusMain">
      <div class="lotusColLeft">
        <div class="lotusui30">
            Version 3.0 content markup goes here
        </div>
        <div class="lotusui">
            Version 2.x content markup goes here
        </div>
        <div class="lotusui40">
            Version 4.0 content markup goes here
        </div>
...
  3. Injection - In this scenario, the banner and footer use one version of the CSS and the remaining content including the page layout is injected from a different source that may use a different version of this CSS, an entirely different CSS library, or no CSS at all. 
    <body class="lotusui30_body lotusui30_fonts">
  <div class="lotusFrame">
    <div class="lotusui30">
                Banner markup goes here in this island
    </div>
    <div class="lotusui30">
                Titlebar markup goes here in this island
    </div>

            Injected markup goes here

...

Displaying a component outside of ICS UI

To use an island to display a component in an already existing page (likey a 3rd party product) that does not use the ICS UI styles:

  • Surround components with a div assigned the namespace class of "lotusui30"
  • Add code to detect if high contrast is turned on which adds the "lotusImagesOff" class to another div wrapped around the island div.
  • Surround the accessibility div with a third div to receive the browser detection classes such as "lotusui_ie", etc. Then add the code to do the browser detection.
  • Link base.css into the head section of your page
  • Link in the appropriate component style sheets

Namespacing Components

All the class names found in this documentation use the lotus prefix. This ensures that they are unique and won't clash with other classes that may exist on the same page.

Products that are adding classes to their pages should use their own unique prefix. If they create a component that gets adopted into the ICS UI component set, the prefix will at that time be changed to lotus.