Overview

Custom colors system - a set of CSS classes that allow you to change colors on-the-fly directly in markup by changing class name. All colors correspond to Material design palette and includes 16 color palettes: 5 contextual (primary, danger, success, warning and info) and 11 alternative. The system is completely optional and moved to a separate colors.min.css minified CSS file.

Basically color system is supported by almost all layout elements and components: sidebar, navbar, content panels, links, text, icons, alerts, dropdown menus, form components, tables, tabs, progress bars, buttons, notifications, popovers, tooltips etc. The system consists of 16 color palettes, each palette includes 1 main color and 5 alternate colors that are darker and lighter than the main one.

Available color palettes:

• Primary palette
• Danger palette
• Success palette
• Warning palette
• Info palette
• Pink palette
• Violet palette
• Purple palette
• Indigo palette
• Blue palette
• Teal palette
• Green palette
• Orange palette
• Brown palette
• Grey palette
• Slate palette

Basic usage

Usage is very simple, all you need to do is to add one of the color CSS classes to the element. Limitless template includes a bunch of pages with color palette usage demonstration - in components, elements and layout parts. Depending on what part of element you want to change, available classes are (primary palette is an example):

Colors

Color system uses Material design palette colors with limitations: only 7 colors of 14 are used. I just tried to keep only main colors and drop unnecessary ones. But if you want to add them back, it's relatively easy to do in SCSS files. Colored blocks below demonstrate all color codes and variables used in the template:

Color system includes 2 source SCSS files - colors.scss and palette.scss located in global_assets/scss/themes/[theme]/colors/ folders. The first file includes class names and styles for them: background, borders, text and alpha colors. The second file includes list of all color variables. Each theme contains its own color palette, however they are the same in all themes, but prepared for changes.

SCSS folder in global_assets/scss/layouts/[layout]/[theme]/compile/ contains one more colors.scss file. This file is needed for colors.min.css CSS file compile. Basically it includes paths to main SCSS files, so when you compile CSS files, use this file:

// Import custom template config
@import "../../../../config";
@import "../../../../shared/utils/ll-functions";
@import "../../../../shared/utils/ll-mixins";
@import "../../../../themes/default/colors/palette";

// Core variables and mixins
@import "../../../../_bootstrap/functions";
@import "../../../../_bootstrap/variables";
@import "../../../../_bootstrap/mixins";

// Import template's variables
@import "../variables/variables-core";
@import "../variables/variables-custom";
@import "../../../../themes/default/bootstrap_limitless/mixins";

// Color system, always load last
@import "../../../../themes/default/colors/colors";

File colors.scss includes a color map and a set of SCSS mixins defined in ll-mixins.scss and ll-functions.scss files. If you want to add a new color shade, simply add a new color or variable to $ll-theme-colors map. If you want to remove any color from CSS, remove it from the map. In both cases you need to re-compile SCSS files.

Each color has a base class and 6 shades. Naming is the following: base class is omitted and doesn't have any suffix (e.g. .bg-primary); shade 50 has different class suffix for CSS targeting purpose (e.g. .alpha-primary); other shades have suffix that corresponds to map (e.g. 400 means .bg-primary-400). So if you need to add a new color - lighter for example - just add a new line in color map with name and color itself: lighter: lighten($color-primary-500, 10%), where "lighter" will be a class name suffix (.bg-primary-lighter) in generated CSS file. SCSS color map looks like this:

//
// Create color map
//

$ll-theme-colors: (
    primary: (
        base: $color-primary-500,
        50: $color-primary-50,
        300: $color-primary-300,
        400: $color-primary-400,
        600: $color-primary-600,
        700: $color-primary-700,
        800: $color-primary-800
    ),
    danger: (
        base: $color-danger-500,
        50: $color-danger-50,
        300: $color-danger-300,
        400: $color-danger-400,
        600: $color-danger-600,
        700: $color-danger-700,
        800: $color-danger-800
    ),
    ...
)