Colors - Slate Palette
Slate palette colors Includes 1 main and 5 accent colors
Slate color palette includes 6 colors: 1 main color without suffix and 5 accent colors with 300, 400, 600, 700 and 800 suffixes. Majority of components and layout parts are coded with maximum flexibility and support of different color options that can be changed on-the-fly just by adding or replacing proper color class. Also works perfectly in combination with other helpers, that makes Limitless very flexible and configurable.
Please note: default Bootstrap contextual classes - primary, danger, success, warning, info - still available and correspond to main colors, so you can use both.bg-danger and .btn-danger as main colors, but if you want to use accent colors, use only .bg-*-*, BS accent classes have been dropped to avoid unnecessary dublicating.
| Class | Description |
|---|---|
.bg-slate.bg-slate-* |
Classes for background color. You can choose between 1 slate color using .bg-slate class and 5 accent colors using .bg-slate-* class in 300, 400, 600, 700, 800 range |
.border-slate.border-slate-* |
Classes for border color. Useful when only border needs to have different colors - validation, highlights, custom buttons etc. Can be used with form controls, selects, wells, buttons and any other block element |
.border-top-slate.border-top-slate-* |
Classes for top border color. Use this class if you need to highlight top border only |
.border-bottom-slate.border-bottom-slate-* |
Classes for bottom border color. Use this class if you need to highlight bottom border only |
.border-left-slate.border-left-slate-* |
Classes for left border color. Use this class if you need to highlight left border only |
.border-right-slate.border-right-slate-* |
Classes for right border color. Use this class if you need to highlight right border only |
.text-slate.text-slate-* |
Classes for text color. These colors can be used with: text, links, icons, lists etc. Base text color doesn't require suffix |
.alpha-slate |
Classes for light accent color. Mainly used in alerts with darker text color from the same palette. Available only in 1 class |
Alert options Bordered, styled, solid in both directions
Form components Inputs, selects, checkboxes, radios, groups etc.
Input field text
Using .text-slate classes
Input border color
Using .border-slate or classes
Input background color
Using .bg-slate classes
Input with feedback
Using .bg-slate classes
Select background color
Using .bg-slate classes
File input color
Styled file input button color
Input group addon
Using .bg-slate classes
Addon and button
Combine text addon and button
Input group button
Using .bg-slate classes
Checkbox colors
Using border and text color classes
Radio classes
Using border color classes
Switchery colors
Using native plugin options
Select2 selects Single and multiple select colors
Select2 single
Using .text-slate classes
Select multiple
Using .border-slate or classes
Result and menu colors
Using .bg-slate classes
Other selects Multiselect, selectboxit and BS select
Bootstrap multiselect
Using plugin buttonClass option
Select box
Using .bg-slate or classes
Result and menu colors
Using data-style attribute
Tabs component color Solid tabs nav and content color
custom background color to the tabs navigation and content with .bg-slate palette classes
Text options Text, link, labels, badges, icons
Label color
Using .bg-slate classes
Badge color
Using .bg-slate classes
Progress bars All colors, all sizes, all options
Basic bar color
Using .bg-slate classes
Striped bar color
Using .bg-slate classes
Animated bar color
Using .bg-slate classes
Table color options header, footer, rows, columns, cells etc
Button colors Button text, border and background colors
Basic button
Using .bg-slate classes
Labeled button
Using .bg-slate classes
Flat button colors
Using border and text color classes
Panel colors Panel, panel border and heading colors
Notifications & dialogs Notifications, modals, popovers, tooltips
Tooltip color
Change default tooltip color
Popover heading
Using .bg-slate classes
Popover background
Apply custom color to the whole popover
Modal dialog header
Using .bg-slate classes
jGrowl notification
Using .bg-slate color classes
PNotify notification
Using .bg-slate color classes
Dropdown menu colors Panel, panel border and heading colors
Dropdown border color
Using .border-slate color classes
Dropdown background color
Using .bg-slate color classes
Adapted menu components
Labels, badges, checkboxes, radios