Docs - Color system
System overview
Overview
Custom color system - a set of CSS classes and SCSS variables that allow you to change colors on-the-fly directly in markup by changing class name or use color tints and shades in SCSS code. Color system includes 12 color palettes: 6 contextual (primary, secondary, danger, success, warning and info) and 6 secondary colors. The system is fully controled by variable maps in _variables-core.scss and is a part of Bootstrap core since version 3.0.
The 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, badges etc. The system consists of 12 color palettes, each palette includes 1 main color (e.g. .bg-danger) and 1 alternate color with "-100" suffix (e.g. .bg-danger-100) by default. This can be easily extended by adding or removing properties in 1 single SASS map in _variables-core.scss file.
Available color palettes:
- Primary palette
- Secondary palette
- Danger palette
- Success palette
- Warning palette
- Info palette
- Pink palette
- Purple palette
- Indigo palette
- Teal palette
- Dark palette
- Yellow palette
Breaking change: in previous versions color system included more color palettes and all colors with all shades/tints were available as class names by default. In version 3.0 the approach has been changed in order to reduce CSS file size and improve performance. It's a breaking change for existing projects, if you are heavily using custom colors in your project, you need to add colors to the SASS map manually to generate related class names.
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 |
*-100 | Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, cards, selects etc. In certain cases requires .text-white class to inverse text color |
| Borders | ||
.border-primary |
*-100 | Border color. Any element that contains border. Can be used in combination with .border class that adds a border to an element |
border-top-primary |
*-100 | Top border only. Any element that contains all sides border or top border only. Can be used in combination with .border-top class that adds a top border to an element |
border-bottom-primary |
*-100 | Bottom border only. Any element that contains all sides border or bottom border only. Can be used in combination with .border-bottom class that adds a bottom border to an element |
border-left-primary |
*-100 | Left border only. Any element that contains all sides border or left border only. Can be used in combination with .border-left class that adds a left border to an element |
border-right-primary |
*-100 | Right border only. Any element that contains all sides border or right border only. Can be used in combination with .border-right class that adds a right border to an element |
| Text | ||
.text-primary |
*-100 | Text color. Can be used in text, icons and links |
| Buttons | ||
.btn-primary |
*-100 | Button color. Can be used in all button variations |
| Alerts | ||
.alert-primary |
*-100 | Alert color. Can be used in all alert style variations |
| Badges | ||
.badge-primary |
*-100 | Badge and badge pill color. Can be used in all badge style variations |
| Buttons | ||
.btn-primary |
*-100 | Solid button color. Can be used in all solid button variations |
.btn-outline-primary |
*-100 | Outline button color. Can be used in all outline button variations |
| Table | ||
.table-primary |
*-100 | Table cell/row color |
| List group | ||
.list-group-item-primary |
*-100 | Text and links in link group |
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:
SCSS and CSS
In version 3.0 color system is embedded in the core scss and no longer has separate files: _colors.scss and _palette.scss. Now all color variables are located in _variables-core.scss file in each layout and theme.
The code contains a set of 9 variables per each color and each color shade is generated dynamically from 1 main color HEX value. So if you decide to change any color, you need to edit only 1 HEX value and re-compile SCSS files, all color variations will be generated by gulp using SASS color functions. Here is what it looks like:
//
// Teal palette
//
$teal: #28968c;
$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;
And this is how the system generates class names:
// Color map
$theme-colors: ();
$theme-colors: map-merge((
"teal": $teal,
"teal-100": $teal-100,
...
), $theme-colors);
As you can see in this example, property is a color class name and value is a color variable. If you add a new line to the map with "teal-400": $teal-400 values, the system will generate a set of classes with *-400 suffix: .bg-teal-400, .alert-teal-400, .text-teal-400, .badge-teal-400, .btn-teal-400 etc. Same logic works the other way around as well.
<div class="bg-primary text-white"> or <div class="bg-primary-100 text-primary">.