Style Definitions

This topic applies to

Applies to

Kilimanjaro

To help you maintain and develop Sass variables, SuiteCommerce Advanced uses the following Sass style definitions. These provide flexible, comprehensible, and easy-to-maintain variables and their values.

This section explains how SuiteCommerce Advanced uses the following style definitions:

Note

To ensure inheritance and to define variables in a readable way, SuiteCommerce Advanced uses the KSS notation to define them. See Style Guide for details.


Colors

Colors represent a large number of variables throughout SuiteCommerce Advanced. These are represented as primary colors, secondary colors, themes, messaging, links, and neutral shades.

Neutral shades and theme colors are handled with a slight difference to other color definitions. Both neutral shades and theme color palettes use a shading scale from 1000 (dark) to 0 (light).

For example, the BaseSassStyle module defines neutral shades in the following variables:

//...

$sc-neutral-shade-base: #222426;
$sc-neutral-shade-900: $sc-neutral-shade-base;
$sc-neutral-shade-600: lighten($sc-neutral-shade-base, 18);
$sc-neutral-shade-300: lighten($sc-neutral-shade-base, 55);
$sc-neutral-shade-0: lighten($sc-neutral-shade-base, 100);

//...

In this example, sc-neutral-shade-base defines the base neutral value #222426, which is a very dark gray. SuiteCommerce Advanced declares other neutral shades as calculated percentages of the base. Therefore, sc-neutral-shade-900 has no calculation and matches the base shade. However, sc-neutral-shade-600 renders as the base shade lightened by 18%. As we progress through each neutral shade, shades becomes lighter. You can extend the class definitions in the _colors.scss file to introduce intermediate shades in this manner.

The theme color palette handles colors in a similar way. Instead of defining a hexadecimal value, the theme palette defines a previously declared color value. For example, $sc-color-secondary.

Typography

Like color variables, SuiteCommerce Advanced declares typography variables in an intuitive, human-readable manner. This relies on the familiar sizing method of extra-small (xs) through triple-extra-large (xxxl). Each of these sizes is relative to a base font size ($sc-font-size-base). SuiteCommerce Advanced expresses the base font size in pixels and all related font sizes in rem units (relative em). 1rem equals the font size of the base element. Therefore, 1.067rem is a calculation meaning the value for $sc-font-size-base times 1.067.

In the following example from _typography.scss, $sc-font-size-m is equal to 15 pixels (1 x 15px), and $sc-font-size-l is equal to about 16 pixels (1.067 x 15px). Likewise, $sc-font-size-xxxl is equal to about 26 pixels (1.73 x 15px).

//...

 $sc-font-size-base: 15px;

$sc-font-size-xxs: 0.75rem;
$sc-font-size-xs: 0.87rem;
$sc-font-size-s: 0.93rem;
$sc-font-size-m: 1rem;
$sc-font-size-l: 1.067rem;
$sc-font-size-xl: 1.2rem;
$sc-font-size-xxl: 1.47rem;
$sc-font-size-xxxl: 1.73rem;

//...

Spacing

Spacing variables affect the structural height, width, and spacing of elements. These are most commonly referred to as the padding and margins. Like color and typographic variables, spacing variables are declared in an intuitive, human-readable manner. SuiteCommerce Advanced uses levels to indicate the added or reduced space for a class relative to a base style. Each level designation in the named variable equals the multiplier. That is, lv2 bares a multiplier of 2.

In the following example from _spacing.scss, $sc-padding-base is equal to 5 pixels, and $sc-padding-lv2 is equal to 10 pixels (2 x 5px). Likewise, $sc-padding-lv8 equals 40 pixels (8 x 5px).

//...

$sc-padding-base: 5px;
$sc-padding-lv1: $sc-padding-base;
$sc-padding-lv2: $sc-padding-base * 2;
$sc-padding-lv3: $sc-padding-base * 3;
$sc-padding-lv4: $sc-padding-base * 4;
$sc-padding-lv5: $sc-padding-base * 5;
$sc-padding-lv6: $sc-padding-base * 6;
$sc-padding-lv7: $sc-padding-base * 7;
$sc-padding-lv8: $sc-padding-base * 8;

//...