Helper Classes Index
"Helper Classes" have been created to provide quick and convenient styling options for common content layout and presentation requirements. To use any of the following classes, simply enter the name of the class (including hyphenation) into the "Selector" field of the element that you wish to style. Helper classes can be as a primary selector style or as a secondary style.
Text Case Classes
Note: By default, text is displayed as "Sentence Case"
upper-case
Displays all text as capital letters (Use this rule sparingly as upper case text traditionally indicates "strong feeling" and can be hard to read with some type faces)
The quick brown fox jumps over a lazy dog.
lower-case
Displays all text as small (lower case) letters
The quick brown fox jumps over a lazy dog.
title-case
Displays all text so that each word begins with a capital letter
The quick brown fox jumps over a lazy dog.
force-normal-case
This rule "overrides" the style of any modified text so that the text is displayed as "Standard Case" (Only use this rule to override currently styled text, never use this rule as a style for plain text)
The quick brown fox jumps over a lazy dog.
Text Decoration Classes
Note: By default, text is displayed without any "Decoration"
strikethrough
Displays text with a "Strike Through" style
The quick brown fox jumps over a lazy dog.
underline
Displays text with an "Underline" style (Use this style sparingly as underlined text traditionally indicates an associated hyperlink)
The quick brown fox jumps over a lazy dog.
overline
Displays text with an "Overline" style (This style is primarily used for specific mathematical or scientific purposes.)
The quick brown fox jumps over a lazy dog.
Text Appearance Classes
text-color-white
Sets the text of a selected element to the color "white" (#FFFFFF). This is good for text that is set over a dark solid, gradient, or photo background.
The quick brown fox jumps over a lazy dog.
text-color-black
Sets the text of a selected element to the color "black" (#000000). This is good for text that is set over a light solid, gradient, or photo background.
The quick brown fox jumps over a lazy dog.
screen-reader-text
This rule is used specifically for website content that is "assistive" in nature and is helpful for users who interact with web content via a "screen reader" device. This rule positions selected content "off-the-page" visually while still being "readable" within the page's content structure. (The example text is not visible because it is positioned outside of the viewport)
The quick brown fox jumps over a lazy dog.
Element Alignment Classes
Note: By default, text is displayed with left alignment (for left to right languages)
align-center
Sets the element's alignment to "Center"
The quick brown fox jumps over a lazy dog.
align-right
Sets the element's alignment to "Right"
The quick brown fox jumps over a lazy dog.
align-justify
Sets the element's alignment to "Justify"
The quick brown fox jumps over a lazy dog. Lorem ipsum dolor sit amet consectetur adipiscing elit litora metus in, posuere sapien turpis hendrerit condimentum dapibus inceptos odio varius lobortis sed, faucibus venenatis placerat et facilisi sagittis sollicitudin eget magnis. Turpis bibendum sapien sagittis fringilla curabitur pharetra vitae eu. Magnis tempus tellus aptent erat suscipit potenti in, dui interdum montes himenaeos per dictumst posuere, egestas feugiat curabitur nisl class ante. Ac est augue viverra nisl et mattis vestibulum, pulvinar euismod cum habitasse ad at, pellentesque volutpat dictum consequat in eget.
Element Opacity Classes
Note: By default, most elements are displayed at 100% opacity (eg. no transparency)
opacity-10pr
Sets a selected element's opacity to 10% (eg. 90% transparent)
The quick brown fox jumps over a lazy dog.
opacity-20pr
Sets a selected element's opacity to 20% (eg. 80% transparent)
The quick brown fox jumps over a lazy dog.
opacity-30pr
Sets a selected element's opacity to 30% (eg. 70% transparent)
The quick brown fox jumps over a lazy dog.
opacity-40pr
Sets a selected element's opacity to 40% (eg. 60% transparent)
The quick brown fox jumps over a lazy dog.
opacity-50pr
Sets a selected element's opacity to 50% (eg. 50% transparent)
The quick brown fox jumps over a lazy dog.
opacity-60pr
Sets a selected element's opacity to 60% (eg. 40% transparent)
The quick brown fox jumps over a lazy dog.
opacity-70pr
Sets a selected element's opacity to 70% (eg. 30% transparent)
The quick brown fox jumps over a lazy dog.
opacity-80pr
Sets a selected element's opacity to 80% (eg. 20% transparent)
The quick brown fox jumps over a lazy dog.
opacity-90pr
Sets a selected element's opacity to 90% (eg. 10% transparent)
The quick brown fox jumps over a lazy dog.
Added Space Classes
space-left-5px
Adds a 5 pixel wide margin on the left side of an element
Information AInformation B
space-right-5px
Adds a 5 pixel wide margin on the right side of an element
Information AInformation B
space-left-10px
Adds a 10 pixel wide margin on the left side of an element
Information AInformation B
space-right-10px
Adds a 10 pixel wide margin on the right side of an element
Information AInformation B
space-left-15px
Adds a 15 pixel wide margin on the left side of an element
Information AInformation B
space-right-15px
Adds a 15 pixel wide margin on the right side of an element
Information AInformation B
space-left-20px
Adds a 20 pixel wide margin on the left side of an element
Information AInformation B
space-right-20px
Adds a 20 pixel wide margin on the right side of an element
Information AInformation B
space-left-25px
Adds a 25 pixel wide margin on the left side of an element
Information AInformation B
space-right-25px
Adds a 25 pixel wide margin on the right side of an element
Information AInformation B
space-left-30px
Adds a 30 pixel wide margin on the left side of an element
Information AInformation B
space-right-30px
Adds a 30 pixel wide margin on the right side of an element
Information AInformation B
space-left-35px
Adds a 35 pixel wide margin on the left side of an element
Information AInformation B
space-right-35px
Adds a 35 pixel wide margin on the right side of an element
Information AInformation B
space-left-40px
Adds a 40 pixel wide margin on the left side of an element
Information AInformation B
space-right-40px
Adds a 40 pixel wide margin on the right side of an element
Information AInformation B
divider-space-5px
Adds a 5 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-10px
Adds a 10 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-15px
Adds a 15 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-20px
Adds a 20 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-25px
Adds a 25 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-30px
Adds a 30 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-35px
Adds a 35 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
divider-space-40px
Adds a 40 pixel wide margin on both the left and right sides of an element
Information A|Information B|Information C
remove margin Classes
no-top-margin
Sets a selected element's default top margin to 0px
The quick brown fox jumps over the lazy dog
no-right-margin
Sets a selected element's default right margin to 0px
The quick brown fox jumps over the lazy dog
no-bottom-margin
Sets a selected element's default bottom margin to 0px
The quick brown fox jumps over the lazy dog
no-left-margin
Sets a selected element's default left margin to 0px
The quick brown fox jumps over the lazy dog
remove Padding Classes
no-top-padding
Sets a selected element's default top padding to 0px
The quick brown fox jumps over the lazy dog
no-right-padding
Sets a selected element's default right padding to 0px
The quick brown fox jumps over the lazy dog
no-bottom-padding
Sets a selected element's default bottom padding to 0px
The quick brown fox jumps over the lazy dog
no-left-padding
Sets a selected element's default left padding to 0px
The quick brown fox jumps over the lazy dog
Hidden Content Classes
Note: The following rules apply to one or more specific breakpoints
hidden-at-desktop
Sets a selected element to "display:none" for the "Desktop" breakpoint
The quick brown fox jumps over the lazy dog
hidden-at-tablet
Sets a selected element to "display:none" for the "Tablet" breakpoint
The quick brown fox jumps over the lazy dog
hidden-at-mobile-landscape
Sets a selected element to "display:none" for the "Mobile Landscape" breakpoint
The quick brown fox jumps over the lazy dog
hidden-at-mobile-portrait
Sets a selected element to "display:none" for the "Mobile Portrait" breakpoint
The quick brown fox jumps over the lazy dog
hidden-on-all
Sets a selected element to "display:none" for all breakpoints
The quick brown fox jumps over the lazy dog