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 |