System overview
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):

Class Prefixes Description
Background
.bg-primary *-300, *-400, *-600, *-700, *-800 Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panels, selects etc.
Borders
.border-primary *-300, *-400, *-600, *-700, *-800 4 sides border color. Any element that contains border
border-top-primary Top border only. Any element that contains all sides border or top border only
border-bottom-primary Bottom border only. Any element that contains all sides border or bottom border only
border-left-primary Left border only. Any element that contains all sides border or left border only
border-right-primary Right border only. Any element that contains all sides border or right border only
Text
.text-primary *-300, *-400, *-600, *-700, *-800 Text color. Can be used in text, icons and links
Alpha
.alpha-primary none Light background or text color. Useful when you need to use lighter color variations, in alerts for 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. Colored blocks below demonstrate all color codes and variables used in the template:

  • 300 #64B5F6
  • 400 #42A5F5
  • 500 #2196F3
  • 600 #1E88E5
  • 700 #1976D2
  • 800 #1565C0
Primary palette
@color-primary-*
  • 300 #E57373
  • 400 #EF5350
  • 500 #F44336
  • 600 #E53935
  • 700 #D32F2F
  • 800 #C62828
Danger palette
@color-danger-*
  • 300 #81C784
  • 400 #66BB6A
  • 500 #4CAF50
  • 600 #43A047
  • 700 #388E3C
  • 800 #2E7D32
Success palette
@color-success-*
  • 300 #FF8A65
  • 400 #FF7043
  • 500 #FF5722
  • 600 #F4511E
  • 700 #E64A19
  • 800 #D84315
Warning palette
@color-warning-*
  • 300 #4DD0E1
  • 400 #26C6DA
  • 500 #00BCD4
  • 600 #00ACC1
  • 700 #0097A7
  • 800 #00838F
Info palette
@color-info-*
  • 300 #F06292
  • 400 #EC407A
  • 500 #E91E63
  • 600 #D81B60
  • 700 #C2185B
  • 800 #AD1457
Pink palette
@color-pink-*
  • 300 #BA68C8
  • 400 #AB47BC
  • 500 #9C27B0
  • 600 #8E24AA
  • 700 #7B1FA2
  • 800 #6A1B9A
Violet palette
@color-violet-*
  • 300 #9575CD
  • 400 #7E57C2
  • 500 #673AB7
  • 600 #5E35B1
  • 700 #512DA8
  • 800 #4527A0
Purple palette
@color-purple-*
  • 300 #7986CB
  • 400 #5C6BC0
  • 500 #3F51B5
  • 600 #3949AB
  • 700 #303F9F
  • 800 #283593
Indigo palette
@color-indigo-*
  • 300 #4FC3F7
  • 400 #29B6F6
  • 500 #03A9F4
  • 600 #039BE5
  • 700 #0288D1
  • 800 #0277BD
Blue palette
@color-blue-*
  • 300 #4DB6AC
  • 400 #26A69A
  • 500 #009688
  • 600 #00897B
  • 700 #00796B
  • 800 #00695C
Teal palette
@color-teal-*
  • 300 #AED581
  • 400 #9CCC65
  • 500 #8BC34A
  • 600 #7CB342
  • 700 #689F38
  • 800 #558B2F
Green palette
@color-green-*
  • 300 #FFB74D
  • 400 #FFA726
  • 500 #FF9800
  • 600 #FB8C00
  • 700 #F57C00
  • 800 #EF6C00
Orange palette
@color-orange-*
  • 300 #A1887F
  • 400 #8D6E63
  • 500 #795548
  • 600 #6D4C41
  • 700 #5D4037
  • 800 #4E342E
Brown palette
@color-brown-*
  • 300 #999
  • 400 #888
  • 500 #777
  • 600 #666
  • 700 #555
  • 800 #444
Grey palette
@color-grey-*
  • 300 #90A4AE
  • 400 #78909C
  • 500 #607D8B
  • 600 #546E7A
  • 700 #455A64
  • 800 #37474F
Slate palette
@color-slate-*
LESS and CSS

Color system includes 2 source LESS files - colors.less and palette.less located in assets/less/core/colors/ folder. The first one includes class names and styles for them: background, borders, text and alpha colors. The second one includes list of all color variables.

Less folder root contains one more colors.less file. This file is needed for colors.min.css CSS file compile. Basically it includes paths to main LESS files, so when you compile CSS files, use this file:

// Core										
// ------------------------------

// Import variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";

// Import overrides
@import "core/variables/variables.less";
@import "core/variables/core-variables.less";



// Color system, always load last
// ------------------------------

// Color palettes
@import "core/colors/palette.less";

// System itself
@import "core/colors/colors.less";

If you want to use color system in your project, i suggest to use minified colors.min.css file included to the package, since basically this file won't be changed often, except if you may want to change colors in palette.less file. But if you don't want to use the system, feel free to remove compiled CSS file, but don't remove any paths to palette.less file in any LESS files, because color variables are used in different components and layout options.