Classes reference

Here is a list of classes that Tuicast uses. Use Ctrl + F to search for a class you need. All CSS variables, or options, mentioned below are located in css/t-options.css

• Colors
• Background colors
• Text Colors
• System Background Colors
• Vertical Margins
• Paddings
• Borders
• Block Width Limiters
• Text Blocks
• Box Shadows
• Images
• Text Highlighting
• Intervals and Separators
• Intervals
• Separators

Colors

Background colors

• .t-bg-main — adds background of the main color defined by --theme-main-color option.
• .t-bg-secondary — adds background of the secondary color defined by --theme-secondary-color option.
• .t-bg-accent — adds background of the accent color defined by --theme-accent-color option.
• .t-bg-additional-1 — adds background of the additional color defined by --theme-additional-color-1 option.
• .t-bg-light — adds background of the light grey color defined by --theme-light-background option.
• .t-bg-lighter — adds background of the lighter grey color defined by --theme-lighter-background option.
• .t-bg-dark — adds background of the dark grey color defined by --theme-dark-background option.
• .t-bg-darker — adds background of the darker grey color defined by --theme-darker-background option.

Text colors

• .t-color-main — adds main color defined by --theme-main-color option.
• .t-color-secondary — adds secondary color defined by --theme-secondary-color option.
• .t-color-accent — adds secondary accent defined by --theme-accent-color option.
• .t-color-additional-1 — adds additional color defined by --theme-additional-color option.
• .t-color-light — adds light grey color defined by --theme-light-background option.
• .t-color-dark — adds dark grey color defined by --theme-dark-background option.

System background colors

• .t-success— adds success background color defined by --success-color option.
• .t-failure— adds error background color defined by --failure-color option.
• .t-warning— adds warning background color defined by --warning-color option.

Vertical margins

• .t-v-margin-small — adds small equal vertical margins (both top and bottom) defined by --small-offset option
• .t-v-margin-medium — adds medium equal vertical margins (both top and bottom) defined by --medium-offset option
• .t-v-margin-large — adds large equal vertical margins (both top and bottom) defined by --large-offset option
• .t-v-margin-huge — adds larger equal vertical margins (both top and bottom) defined by --huge-offset option
• .t-v-margin-section — adds largest equal vertical margins (both top and bottom) designated for setting section intervals defined by --section-offset option.
• .t-top-margin-small — adds a small top margin defined by --small-offset option.
• .t-top-margin-medium — adds a medium top margin defined by --medium-offset option.
• .t-top-margin-large — adds a large top margin defined by --large-offset option.
• .t-top-margin-huge — adds a larger top margin defined by --huge-offset option.
• .t-top-margin-section — adds the largest top margin defined by --section-offset option.
• .t-bottom-margin-small — adds a small bottom margin defined by --small-offset option
• .t-bottom-margin-medium — adds a medium bottom margin defined by --medium-offset option.
• .t-bottom-margin-large — adds a large bottom margin defined by --large-offset option.
• .t-bottom-margin-huge — adds a larger bottom margin defined by --huge-offset option.
• .t-bottom-margin-section — adds the largest bottom margin defined by --section-offset option.

Paddings

• .t-padding — by default, adds medium equal paddings defined by --medium-offset option. Same as .t-medium-padding
• .t-padding-small — adds small equal paddings defined by --small-offset option.
• .t-padding-medium — adds medium equal paddings defined by --medium-offset option.
• .t-padding-large — adds large equal paddings defined by --large-offset option.
• .t-padding-huge — adds larger equal paddings defined by --huge-offset option.
• .t-padding-section — adds largest equal paddings defined by --section-offset option.
• .t-no-padding — forcibly sets paddings to 0. uses !important

Borders

• .has-border — a required class to use .has-dark-border or .has-light-border classes alongside. Used to set border-radius according to --overall-border-radius option. By default, also adds a dark border of a --theme-dark-background color.
• .has-dark-border — adds a dark-colored border of a --theme-dark-background color.
• .has-light-border — adds a light-colored border of a --theme-light-background color.
• .has-light-top-border — adds a top border of a --theme-light-background color.
• .has-light-right-border — adds a right border of a --theme-light-background color.
• .has-light-bottom-border — adds a bottom border of a --theme-light-background color.
• .has-light-left-border — adds a left border of a --theme-light-background color.
• .has-top-border or .has-dark-top-border — adds a top border of a --theme-dark-background color.
• .has-right-border or .has-dark-right-border — adds a right border of a --theme-dark-background color.
• .has-bottom-border or .has-dark-bottom-border — adds a bottom border of a --theme-dark-background color.
• .has-left-border or .has-dark-left-border — adds a left border of a --theme-dark-background color.
• .has-no-border-radius — forcibly sets border radius to 0. uses !important
• .has-no-border — forcibly sets border to none. uses !important

Block Width Limiters

Be sure to use them only for block-type elements.

• .t-w-320 — sets element's max-width to 320px.
• .t-w-500 — sets element's max-width to 500px.
• .t-w-25 — sets element's width to 25%.
• .t-w-33 — sets element's width to 33%.
• .t-w-50 — sets element's width to 50%.

Text Blocks

• .text-600 — limits the text wrapping block's width to 600px.
• .block-centered — centers the block with auto margins.
• .c600 — (centered text-600) is a short form of the previous two combined.
• .text-centered — centers the text within its block container.
• .text-alignleft — aligns the text to the left within its block container.
• .text-alignright — aligns the text to the right within its block container.

Box Shadows

• .has-box-shadow — adds box-shadow defined by --overall-box-shadow option.
• .has-no-box-shadow — forcibly sets box-shadow to none. uses !important

Images

• .t-img-cover sets an image centered and cropped by its parent container size

Text Highlighting

• .t-text-underline-fine — dolor sit amet
• .t-text-underline-heavy — cumque deleniti
• .t-text-underline-regular — laboriosam
• .t-text-underline-dotted — cumque fuga
• .t-text-underline-dashed — quam suscipit?
• .t-text-highlight-light — exercitationem
• .t-text-highlight-dark — molestias
• .t-text-hint — Aspernatur
• .t-text-bordered — Accusantium

Intervals and Separators (Dividers)

Intervals

• .t-interval-small — adds a small vertical interval of --small-offset height.
• .t-interval-medium — adds a medium vertical interval of --medium-offset height.
• .t-interval-large — adds a large vertical interval of --large-offset height.
• .t-interval-huge — adds a larger vertical interval of --huge-offset height.
• .t-interval-section — adds the largest vertical interval of --section-offset height.

Separators

• .t-separator-0 — places a fullwidth line divider with zero vertical margins.
• .t-separator-small — places a fullwidth line divider with small vertical margins from --small-offsetoption.
• .t-separator-medium — places a fullwidth line divider with medium vertical margins from --medium-offsetoption.
• .t-separator-large — places a fullwidth line divider with large vertical margins from --large-offsetoption.
• .t-separator-huge — places a fullwidth line divider with larger vertical margins from --huge-offsetoption.
• .t-separator-section — places a fullwidth line divider with largest vertical margins from --section-offsetoption.