Version:

    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.