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.
Wed Mar 26 2025 01:08:28 GMT+0000 (Coordinated Universal Time)