White label

Sky Framework was created in a way to support white labeling; with the exception of the primary theme colors, the base color of almost every component is colored in neutral tones, so with small adjustments to specific variables, developers can replicate company themes with ease.

The source code is written in SCSS and requires a CSS pre-processor to output CSS.

Due to the way the framework is applied and maintained, it is suggested that only color-specific source code is pre-processed for white-labeling purposes, and the output used to override the default styling classes.

Keep in mind that not all colors are themable - there are contexual colors that should not be confused with theme colors, eg form control validation state colors or color scales.

• Variables
• Download source

Variables

Just the next few variables are used to theme Sky framework - this is mainly due to the fact that component colors are generated using SASS functions.

For the link and button colors and their pseudo-states, variable $link-color is used as a base to generate the $hover-color and $focus-color pseudo-classes using SASS functions, although this is not restrictive in any way when it comes to white-labeling, where pseudo-classes variables can be individually defined.

$link-color

#0078d7

$hover-color

lighten($link-color, 7%)

$focus-color

darken($link-color, 14%)

$header-color

#00498f

Download source

You can download the source code for white-label by clicking the button below - to function as intended, the compiled output must be added after the Sky Framework stylesheet so that it overrides the default styling.

All element, component and layout colors for the white-label product are generated using the variables mentioned above, which are included at the top of the source file, however, depending on the white-label branding needs, elements and components can be individually styled.

As a starting point replace the following variable defaults and then fine-tune individual components if required. The source file is thematically divided in 3 sections - elements, layouts and components.

SCSS

// Variables

// Main colors
$link-color:#0078d7;
$hover-color: lighten($link-color, 7%);
$focus-color: darken($link-color, 14%);

// Element-specific colors
$header-color: #00498f;

In the following source code sample of a component, simply replace the default variables with explicit values if required.

SCSS

.progress-bar {
  background:$link-color;
}
.progress-dark .progress-bar {
  background:darken($link-color, 14%);
}