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

Horizontal Rule Classes

horizontal-rule-standard


horizontal-rule-embossed


horizontal-rule-dotted


horizontal-rule-dashed


horizontal-rule-gradation