Learn how to use color modifier classes and how to change variable values in order to create a new skin with a different color palette.
Boomerang comes with 5 base colors which are meant to paint your website with the combination that best suits your brand or project.
Each base color variable is represented by a special CSS class that can be used on a large variety of elements in your website. Also it can be used to color the main sections so you can delimit the content in a nice and colorful way.
Next we will explain how Boomerang base colors are thought and how you can use them in your project by creating your one color palette:
Variable | Class | Description |
---|---|---|
$color-base-1 |
.bg-base-1 |
This is the website's main color. Choose what color would you want your website to have (brand color) |
$color-base-2 |
.bg-base-2 |
This is the website's second main color. In case you want a two color website choose a contrast color. If not, replace it with the same value as $color-base-1 |
$color-base-3 |
.bg-base-3 |
Choose a neutral color such gray or light gray. |
$color-base-4 |
.bg-base-4 |
Replace it with a dark color that comes in contrast with the first two base colors. |
$color-base-5 |
.bg-base-5 |
Replace it with a light color that comes in contrast with the two three base colors. |
.bg-base-1
.bg-base-2
.bg-base-3
.bg-base-4
.bg-base-5