Working with helper CSS color classes

Based on the selections you have made at the Global Colors tab, Style Kits generates a number of Helper classes that add color properties to Elements.

You can apply the color classes manually on any element, under the Advanced tab, at the CSS Class field, exactly the same way you have been using the sk-dark-bg and sk-light-bg classes as described in the Global Colors section.

The auto-generated CSS classes are the following:

• sk-primary-accent
• sk-secondary-accent
• sk-primary-bg
• sk-secondary-bg
• sk-light-bg
• sk-dark-bg
• sk-text-light
• sk-text-dark

In general, all the above classes fall into three categories: Accent, background and text classes

Accent classes

Accent classes apply color on elements, mainly typographic widgets and molecules (icon boxes, dividers etc). When they are used on a column or a section, they apply the color to their contained elements.

⚡️ sk-primary-accent

Apply this class to any element that you want to inherit the Primary Accent color as defined in your Global colors.

⚡️ sk-secondary-accent

Apply this class to any element that you want to inherit the Secondary Accent color as defined in your Global colors.

Background classes

Background classes apply color on the background of elements, used mainly on sections and columns. 

Apart from the sk-dark-bg and sk-light-bg which offer a basic level of color management for your sections, you also have the following background classes that you can apply on surfaces, and will dynamically reflect the color choices you have made at the Global Colors section.

⚡️ sk-primary-bg

Apply this class to any element that you want it's background to inherit the Primary Accent color as defined in your Global colors.

⚡️ sk-secondary-bg

Apply this class to any element that you want it's background to inherit the Secondary Accent color as defined in your Global colors.

Text Classes

⚡️ sk-text-light

This class gives your element the default Text and Headings Color. It is also the color that is inherited by Typographic elements inside a section with the sk-dark-bg class applied.

⚡️ sk-text-dark

This class gives your element the color that you have defined as Text over Dark Background in your global colors settings. It is also the color that is inherited by Typographic elements inside a section with the sk-light-bg class applied.

You may find more info on the Light and dark background controls and classes, in the Global Colors article. 

Nested Classes

By using color classes and manipulating the global color controls, you achieve a modular, flexible approach with dynamic colors throughout your entire website.

You can experiment using nested color classes to fine-tune the coloring. For example, in a parent section, apply the sk-dark-bg class and then apply the sk-primary-accent in one of its columns.

As the image shows below, you could dynamically introduce a deeper level of color consistency in your layout, and fine-tune the color of surfaces and elements in a consistent way.