Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.
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
Frequently asked questions
Get instant answers to common questions. Available online 24/7.
Find answers
Raise a support ticket
To raise a ticket, sign into Acquia Cloud and select Help in the top menu.
Raise support ticket
Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.