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.

Classes and variables

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.
Base color 1 .bg-base-1
Base color 2 .bg-base-2
Base color 3 .bg-base-3
Base color 4 .bg-base-4
Base color 5 .bg-base-5