Colours

Barebones defines theme colours in a central Sass map. These colours are used by base styles, components and generated utility classes.

Colour map

Colours are configured in assets/styles/config/_variables.scss. Barebones ships with a number of basic values. This default palette is intentionally small so it can be expanded or replaced with project-specific colours.

$colors: (
    'base': #444,
    'background': #fff,
    'brand': #444,
    'success': #5CB85C,
    'info': #444,
    'warning': #F0AD4E,
    'danger': #D9534F
);

Using colours

Use the Sass colour map when writing styles. This keeps colour values centralised and easier to update.

@use "sass:map";
@use '../config' as *;

.example {
    color: map.get($colors, 'base');
    background-color: map.get($colors, 'background');
}

Text utilities

Barebones generates text colour utilities from the colour map. These utilities will expand automatically as you define define new values in the map.

text-base
text-background
text-brand
text-success
text-info
text-warning
text-danger

<p class="text-brand">Brand coloured text</p>

Background utilities

Background colour utilities are generated from the same map.

bg-base
bg-background
bg-brand
bg-success
bg-info
bg-warning
bg-danger

Example:

<div class="bg-brand text-background">
    Brand background
</div>

Adding colours

Let's imagine you want to add a new colour called 'accent', first add it to the $colors map:

$colors: (
    'base': #444,
    'background': #fff,
    'brand': #444,
    'success': #5CB85C,
    'info': #444,
    'warning': #F0AD4E,
    'danger': #D9534F,
    'accent': #0066CC,
);

This makes the colour available in Sass:

.example {
    color: map.get($colors, 'accent');
}

Barebones will also create matching utility classes:

text-accent
bg-accent