Site Studio
CSS variables
Site Studio provides access to various CSS variables from the Website settings, which can be utilized in the development of Custom Elements, Custom Components or the creation of a custom theme in Drupal.
See below a table of available CSS variables:
|
CSS variable |
Value | |
|---|---|---|
|
Base unit settings | ||
|
Base font size |
--ssa-base-unit-settings-font-size |
px value |
|
Color palette | ||
|
*Colors |
--ssa-color-palette-[uid] |
hex / rgb(a) color |
|
Default font settings | ||
|
Default font family |
--ssa-default-font-settings-font-family |
Font stack |
|
Default color |
--ssa-default-font-settings-color |
hex / rgb(a) color |
|
Font libraries | ||
|
*Font stacks |
--ssa-font-stacks-[uid] |
Font stack |
|
Responsive grid settings | ||
|
*Width / Minimum width |
--ssa-responsive-grid-settings-width |
px / rem value |
|
**Boxed width |
--ssa-responsive-grid-settings-boxed-width |
px / rem value |
|
**Inner gutters |
--ssa-responsive-grid-settings-inner-gutter |
px / rem value |
|
**Outer gutters |
--ssa-responsive-grid-settings-outer-gutter |
px / rem value |
* The UID can be located on the relevant Website settings page, situated in the box adjacent to $coh-color or $coh-font, as applicable.
**CSS variable is designed to be responsive and will adapt accordingly when the media query conditions are met.
For more information on using CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
If this content did not answer your questions, try searching or contacting our support team for further assistance.
|
--ssa-color-palette-[uid] |
|
hex / rgb(a) color |
|
Default font settings |
|
Default font family |
--ssa-default-font-settings-font-family |
Font stack |
|
Default color |
--ssa-default-font-settings-color |
hex / rgb(a) color |
|
Font libraries |
|
*Font stacks |
--ssa-font-stacks-[uid] |
Font stack |
|
Responsive grid settings |
|
*Width / Minimum width |
--ssa-responsive-grid-settings-width |
px / rem value |
|
**Boxed width |
--ssa-responsive-grid-settings-boxed-width |
px / rem value |
|
**Inner gutters |
--ssa-responsive-grid-settings-inner-gutter |
px / rem value |
|
**Outer gutters |
--ssa-responsive-grid-settings-outer-gutter |
px / rem value |
* The UID can be located on the relevant Website settings page, situated in the box adjacent to $coh-color or $coh-font, as applicable.
**CSS variable is designed to be responsive and will adapt accordingly when the media query conditions are met.
For more information on using CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio