Version:

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 

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.