Skip to main content link. Accesskey S

Helper Classes

Helper classes are what we call marker classes (found at the top level of the DOM, they help facilitate global types of actions) and general classes (classes that can be applied to individual DOM elements, they provide additional specific functionality that is useful across components).

Marker Classes

Marker classes are used at the top level of the DOM. Browser detection classes are applied to the HTML element. All other marker classes are applied to the body element. (Instructions for applying marker classes when using data islands.) Marker classes are used to help us do special things in our markup, like 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
lotusui_ie6 HTML tag Allows you to qualify styles to target Internet Explorer 6
lotusui_ie7 HTML tag Allows you to qualify styles to target Internet Explorer 7
lotusui_ie8 HTML tag Allows you to qualify styles to target Internet Explorer 8
lotusImagesOff BODY tag Triggers any text wrapped with the class of lotusAltText to show

General Classes

There are times when your design might require a small adjustment, like making text smaller, or indenting something a little bit more to align it properly. You might find a need to float an element to the left or right. For all these types of adjustments, we have created a bunch of general classes. You will find these in the base.css file. They are all prefaced with the lotusui namespace. Here is a summary of what we have:

Class What it does
lotusAccess Positions items needed for screenreaders offscreen
lotusAlignRight Aligns text to the right
lotusAlignLeft Aligns text to the left
lotusAltText A class used to wrap text that will display when images are turned off
lotusBig Bumps text size up one level
lotusBold Bolds text
lotusBorderTop Adds a 1 pixel top border to an element
lotusBorderBottom Adds a 1 pixel bottom border to an element
lotusBreakWord Allows long, unbroken content to wrap
lotusCenter Centers text
lotusChunk Vertically spaces elements with a 5px top margin
lotusChunk10 Vertically spaces elements with a 10px top margin
lotusChunk15 Vertically spaces elements with a 15px top margin
lotusChunk20 Vertically spaces elements with a 20px top margin
lotusClear Clears the element so it appears below any left and right floated elements
lotusClearLeft Clears the element so it appears below any left floated elements
lotusClearRight Clears the element so it appears below any right floated elements
lotusClickable Sets the cursor to make an item look clickable
lotusDraggable Puts a move cursor on an element
lotusEllipsis In all browsers that support it, truncates text with ellipsis (non-supporting browsers will just truncate)
lotusFixedTable Fixes table-layout for a table
lotusHidden Sets an element to display:none
lotusHideOverflow Sets an element to overflow:hidden
lotusHighlighted Highlighted text color (red)
lotusIBMLogo, lotusIBMLogoFooter The IBM branding logo
lotusInactive Inactive text color (gray)
lotusIndent10 Indents 10 pixels to the left, using padding
lotusIndent15 Indents 15 pixels to the left, using padding
lotusIndent20 Indents 20 pixels to the left, using padding
lotusIndent40 Indents 40 pixels to the left, using padding
lotusIndent60 Indents 60 pixels to the left, using padding
lotusInlineList Turns a vertical list into a horizontal list with separator bars [IMPORTANT: when coding the html list, remove all code formatting and create the list as one long string to avoid rendering issues in Firefox]
lotusItalic Italicizes text
lotusLeft Floats an element to the left (and aligns text to the left)
lotusLoading The loading animated gif
lotusLogo, lotusLoginLogo The Lotus branding logo
lotusLTR Sets an element’s direction to ltr
lotusMeta Makes text gray (use for supporting text)
lotusNoWrap Sets the whitespace of an element to not wrap
lotusNudge This is an empty general style that you can qualify with another style in your application style sheet to do miscellaneous tweaks
lotusOffScreen For positioning elements offscreen, like text to be read by screenreaders
lotusRequired Color for required fields asterisk
lotusRight Floats an element to the right (and aligns text to the right)
lotusRTL Sets an element’s direction to rtl
lotusShadow Applies a drop shadow
lotusSymbol Sets the font to support unicode symbols consistently across languages
lotusTiny Sets the font size to .9em

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.