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 |
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 |
lotusBreakWord | Allows long, unbroken content to wrap |
lotusBold | Bolds text |
lotusBorderTop | Adds a 1 pixel top border to an element |
lotusBorderBottom | Adds a 1 pixel bottom border to an element |
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 |
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 |
lotusTiny | Sets the font size to .9em |