Color setters

Here is the list of practical helper classes to style elements, for example a button, table item, div, etc. What they do is pretty simple: set background, color, and border color based on the color palette.

index.html

<div class="my-box flex-center style-blue">
  <p class="text-centered">Hello Everybody!</p>
</div>

<div class="my-box flex-center style-red">
  <p class="text-centered">Hello Everybody!</p>
</div>

<div class="my-box flex-center style-green">
  <p class="text-centered">Hello Everybody!</p>
</div>

style.css

.my-box {
  width: 200px;
  height: 100px;
  margin: 0.5em;
  border: 0.25em solid;
  border-radius: 1em;
}

Main colors

.style-accent

UI primary color.

.style-accent-light

UI primary color but lighter.

Palette colors

These colors can be declared from the _config.scss file or reset with CSS, for more information read this page.

.style-blue-light

.style-blue

.style-green-light

.style-green

.style-yellow-light

.style-yellow

.style-orange-light

.style-orange

.style-red-light

.style-red

.style-pink-light

.style-pink

.style-purple-light

.style-purple

.style-light-light

.style-light

.style-dark-light

.style-dark

State colors

Colors are an important part of expressing feelings in the process of designing a UI, this helper classes are specifically here to help you achieve it.

.style-success-light

.style-success

.style-info-light

.style-info

.style-warning-light

.style-warning

.style-danger-light

.style-danger

Text colors

There are also some useful classes for changing texts color.

.color-accent-light  Light lorem ipsum dolor sit amet.

.color-accent  Lorem ipsum dolor sit amet.

.color-blue-light  Light lorem ipsum dolor sit amet.

.color-blue  Lorem ipsum dolor sit amet.

.color-green-light  Light lorem ipsum dolor sit amet.

.color-green  Lorem ipsum dolor sit amet.

.color-yellow-light  Light lorem ipsum dolor sit amet.

.color-yellow  Lorem ipsum dolor sit amet.

.color-orange-light  Light lorem ipsum dolor sit amet.

.color-orange  Lorem ipsum dolor sit amet.

.color-red-light  Light lorem ipsum dolor sit amet.

.color-red  Lorem ipsum dolor sit amet.

.color-pink-light  Light lorem ipsum dolor sit amet.

.color-pink  Lorem ipsum dolor sit amet.

.color-purple-light  Light lorem ipsum dolor sit amet.

.color-purple  Lorem ipsum dolor sit amet.

.color-success-light  Light lorem ipsum dolor sit amet.

.color-success  Lorem ipsum dolor sit amet.

.color-info-light  Light lorem ipsum dolor sit amet.

.color-info  Lorem ipsum dolor sit amet.

.color-warning-light  Light lorem ipsum dolor sit amet.

.color-warning  Lorem ipsum dolor sit amet.

.color-danger-light  Light lorem ipsum dolor sit amet.

.color-danger  Lorem ipsum dolor sit amet.

.color-light-light  Light lorem ipsum dolor sit amet.

.color-light  Lorem ipsum dolor sit amet.

.color-dark-light  Light lorem ipsum dolor sit amet.

.color-dark  Lorem ipsum dolor sit amet.