Palette classes
Yellow color palette includes 1 main
yellow color. Majority of components and layout
parts are coded with maximum flexibility and support 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, which makes Limitless very
flexible and configurable.
SASS files include 10 different shades and tints of each color, but class names include only 1 of them. You can easy add new shades or tints of any color if you need to just by adding color variable to theme color map and re-compile your SASS files. That will generate all necessary color classes for all components and automatically add all states to them.
Please note: default Bootstrap contextual classes - yellow, yellow, yellow, yellow, yellow - are still available and correspond to main colors, so you can use both.bg-yellow and
.[btn|btn-flat|btn-outline|table|alert]-yellow as
main color classes. For light semi-transparent yellow background
color, use our background opacity classes, (e.g.
.bg-yellow.bg-opacity-25) and optionally
.text-yellow class.
| Class | Description |
|---|---|
.bg-yellow |
Class for background color. You can control the
transparency with our opacity utility classes and use
them in combination with background color, e.g.
.bg-yellow.bg-opacity-25. Available values
are 10, 20, 25, 50, 75, 100.
|
.button-yellow |
Class for solid buttons. Includes hover, active and open states |
.button-outline-yellow |
Class for outline buttons. Includes hover, active and open states |
.button-flat-yellow |
Class for flat buttons. Includes hover, active and open states |
.alert-yellow |
Classes for light alerts. You can use
.bg-yellow in combination with
.text-white for solid background color
|
.table-yellow |
Classes for light table rows or cells. You can use
.bg-yellow in combination with
.text-white for solid background color
|
.list-group-item-yellow |
Classes for inline and clickable list group items. Include hover, and active states |
.border-yellow |
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, cards, buttons and any other block element.
Control border opacity with
.border-opacity-[10|20|25|50|75|100]
classes
|
.border-top-yellow |
Classes for top border color. Use this
class if you need to highlight top border only
|
.border-bottom-yellow |
Classes for bottom border color. Use this
class if you need to highlight bottom border only
|
.border-start-yellow |
Classes for left border color. Use this
class if you need to highlight left border only
|
.border-end-yellow |
Classes for right border color. Use this
class if you need to highlight right border only
|
.text-yellow |
Classes for text color. These colors can be used with:
text, links, icons, lists etc. Base text color doesn't
require suffix. Control text color opacity with
.text-opacity-[10|20|25|50|75|100] utility
classes
|
Alert options
Bordered, styled, solid in both directionsText options
Color options for text, link, badge and badge pillsText
Use .text-yellow class in any inline or block
element to change text color. Edit --yellow var
to change it globally
Flat badge
Use .bg-yellow and
.bg-opacity-20 along with
.text-yellow classes to show semi-transparent
badge
Link
Use .link-yellow class in anchor tag to apply a
yellow color scheme to links. This class also adds hover
state
Badge pill
Add .rounded-pill utility class to
.badge.bg-yellow element to show a regular
badge with fully rounded corners
Badge
Add .bg-yellow class to the base
.badge element. Badge colors are controlled by
color utility classes
Outline badge
To show a badge in outline style, use
.border.border-yellow along with
.text-yellow set of classes
Progress bars
All colors, all sizes, all optionsBasic bar color
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes
Striped bar color
Add .progress-bar-striped to any progress bar
to apply a stripe over the bar’s
yellow background color
Animated bar color
Use .progress-bar-animated in yellow progress
bar to animate the stripes right to left via CSS3 animations
Table color options
Header, footer, rows, columns, cells etc.Header and footer
tr element. Adjust text color with our color
utility classes
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| # | First Name | Last Name | Username |
Table rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| # | First Name | Last Name | Username |
Table columns
td elements instead of tr. You can
also change border color if necessary
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| # | First Name | Last Name | Username |
Solid table
.bg-* classes to the table element and adjust
text color via our text color utility classes
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Eugene | Kopyov | @Kopyov |
| 2 | Victoria | Baker | @Vicky |
| 3 | James | Alexander | @Alex |
| # | First Name | Last Name | Username |
Button colors
Button text, border and background colorsSolid button
Add .btn-yellow to the button or anchor element
with the base .btn class to show a button in a
solid style
Labeled basic button
Add .btn-yellow to labeled solid button and
control background color of button label with bg color
utility classes
Outline button
Add .btn-outline-yellow to the button or anchor
element to show a yellow button in an outline style
Labeled outline button
Add .btn-outline-yellow to labeled outline
button and control bg color of label with utility classes
Flat button
Add .btn-flat-yellow to the button or anchor
element to show a yellow button in a flat style
Labeled flat button
Add .btn-flat-yellow to labeled flat button and
control background color of button label with bg color
utility classes
Card colors
Card, card border and heading colorsYellow card
.bg-yellow and
.text-black utility classes added to the card
header
Yellow bordered card
.bg-yellow.text-black and
.border-yellow utility classes
Yellow solid card
.bg-yellow and
.text-black classes added to the card container
Notifications & dialogs
Notifications, modals, popovers, tooltipsTooltip color
Change tooltip style to yellow color scheme in
template configuration option and
.tooltip-custom class
Popover background
Change popover style to yellow color scheme in
template configuration option and
.popover-custom class
Noty notification
Add bg-yellow text-black to
theme option in Noty config to show
notification in yellow color scheme
Modal dialog header
Change default light style of modal header to custom by
adding .bg-yellow.text-black to modal header
Modal background
Add .bg-yellow and
.text-black classes to
.modal-content container to apply custom
background to modal
Modal dialog footer
The same as modal footer, but instead of
.modal-header add color classes to
.modal-footer container
Toast header
Use our color classes in
.toast-header container along with
.text-black class
Toast border
Use color utility classes .border-[color] in
.toast and
.toast-header containers to change toast border
color
Toast background
Use .bg-[color] and .text-black in
.toast container to change the default toast
color scheme
