Helper 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 |
| lotusFloat | Used in conjunction with lotusFloatContent and floats an element to the left |
| lotusFloatContent | Used after a lotusFloat element for the left image, right non-wrapped text layout |
| 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 |
| lotusIndicator | For an indicator badge, text white on a colored background |
| 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 | The 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 |
| lotusStyledScroll | Styles scroll bars in WebKit browsers |
| lotusSymbol | Sets the font to support unicode symbols consistently across languages |
| lotusTiny | Sets the font size to .9em |