top
download
Brutalist Framework

Flavors

Color Classes Library

Flavors is a delicious buffet of colors, baked with CSS love.

bos/core/css/flavors.css
$flavors_css

Core Colors

Core color classes can be used to apply a plain background, text, border, or outline color.

Shades of White

Shades of Grey

Shades of Red

Shades of Pink

Shades of Purple

Shades of Blue

Shades of Brown

Shades of Orange

Shades of Yellow

Shades of Green

Text Color

Simply apply -t after a core color class to change the text color.

EXAMPLE:

.green-t

Text Shadow

Simply apply -t-s (text-shadow) after a core color class to change the text shadow color.

EXAMPLE:

.green-t-s

Border & Outline Color

Simply apply -b (border) or -o (outline) after a core color class to change the border or outline color.
See "Basic Borders" and "Outlines" under BUTCH on how to apply borders.

EXAMPLE:

Thick dashed green border with fat dotted plum outline
.plum-o .green-b

Change Background Color on Hover

The background color can be changed upon hover by applying a -h after the class name. In the example below, we change a banana box to a mango upon hover:

HOVER ME
.banana.mango-h

Variables

Similar to Core Colors, there are CSS variables used to define a few color classes. Variables are defined in the core/css/variables.css file. See CORE for more details on working with CSS variables. Variable-based color classes work the same way as Core Colors:

Examples:
.secondary-t
.tertiary.primary-t
.auxiliary.ocolor-b.ocolor-t

Concoctions

Concoctions are pre-defined color combinations that include flat or gradient backgrounds, text colors, link colors, and border & outline colors.

Flat Concoctions

Gradient Concoctions

Color Override

Background, text, border, and outline core color classes can be used to override a concoction color.

<p class="orange-cream">Orange
  <span class="blueberry-t">Blueberry</span>
</p>

Output:

Orange Blueberry

Borders & Outlines

Concoctions use pre-define border and outline colors. However, to display them, you'll need to apply the appropriate classes. See the Boundaries section in BUTCH.

Gradients

Use these classes to apply a pre-defined gradient background to any element.

Mesh Gradients

×