Options

Options reference

CSS site options are stored in css/t-options.css. Let's have a closer look at them.

Global

• --overall-content-width: defines a content width, e.g. .t-inner-section width.
• --main-container-top-margin: defines a page vertical offset (which is added to --header-height value)

Header

• --header-height: defines the main header's height:

Typography

• --headers-font: defines a font used in <h1> — <h6> headings.
• --text-font: defines a text font used throughout the site.
• --text-size: defines a font size used throughout the site.

Gaps & Offsets

Offsets are used for blocks' margins and paddings. Gaps are used for grids.

• --small-offset: defines the smallest unit of offset (padding or margin).
• --medium-offset: defines the medium unit of offset. By default, it's --small-offset×2.
• --large-offset: defines the large unit of offset. By default, it's --small-offset×3.
• --huge-offset: defines the larger unit of offset. By default, it's --small-offset×4.
• --section-offset: defines the largest unit of offset, used for sections, primarily .t-inner-section. By default, it's --small-offset×5.
• --gap: defines a grid gap.
• --halfgap: defines a half gap.
• --doublegap: defines a double gap.

Colors

• --theme-main-color: defines a main color from the site's palette.
• --theme-secondary-color: defines a secondary color from the site's palette.
• --theme-accent-color: defines an accent color from the site's palette.
• --theme-additional-color-1: defines an additional color.
• --text-color: defines a text color throughout the site.
• --light-text-color: defines a light color for the text against darker backgrounds.
• --headers-font-color: defines a color for the headings.
• --link-dark-color: defines a dark links color
• --link-light-color: defines a light links color
• --theme-light-background: defines a color for a light background. Used by .t-bg-light class.
• --theme-lighter-background: defines a color for a lighter background. Used by .t-bg-lighter class.
• --theme-dark-background: defines a color for a dark background. Used by .t-bg-dark class.
• --theme-darker-background: defines a color for a darker background. Used by .t-bg-darker class.
• --success-color: a color used for system success messages and form elements. Used by .t-success class.
• --failure-color: a color used for system failure messages and form elements. Used by .t-failure class.
• --warning-color: a color used for system warning messages and form elements. Used by .t-warning class.

Other

• --overall-border-radius: defines a border-radius throughout the site.
• --overall-box-shadow: defines a box-shadow throughout the site.