Brutalist Framework

Flavors

Color Classes Library

Add a little flavor with these useful pre-defined color classes.

Core Colors

Use these classes to apply a color background.

.white / .vanilla / .cream

.vanilla-bean

.silver

.mushroom

.platinum

.grey / .gray

.charcoal

.black

.red / .tomato

.strawberry

.cherry

.black-cherry

.blood / .maroon / .pomegranate

.blood-orange

.orange

.pumpkin-spice

.mango

.tangerine

.peach

.carrot

.bubble-gum

.pink

.cotton-candy

.raspberry

.light-purple

.purple / .plum

.eggplant

.grape

.light-blue / .water

.pool-water

.blue-candy

.blue

.blueberry

.wheat

.peanut / .peanut-butter

.light-brown / .cappuccino

.brown

.chocolate

.dark-chocolate

.green / .cucumber

.lime

.green-apple

.kiwi

.mint

.spinach

.olive

.pistachio

.butter

.yellow / .lemon

.cheddar

.pineapple

.banana

.honey / .amber


Text Color

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

EXAMPLES:

.lime-text .banana-text .blue-text .bubble-gum-text


Border Color

Simply apply -border after a core color class to change the border color. See "Basic Borders" under BUTCH on how to apply borders.

EXAMPLES:

Solid Thick Water Border
.water-border

Dotted Thick Cheddar Border
.cheddar-border

Dashed Thin Black Cherry Border
.black-cherry-border


Color Combos: Mixed Flavors

Mixed flavors are pre-defined color combinations. The first flavor is the background color, the 2nd is the text color. Use these classes to apply a color combo to any element.

.monochrome

.spinach-carrot

.strawberry-banana

.orange-cream

.lemon-lime

.blueberry-pomegranate

.honey-blueberry

.chocolate-strawberry

.chocolate-peanut-butter

.green-apple-blueberry

.cherry-vanilla

.grape-pool-water

.pumpkin-spice-butter

.vanilla-chocolate

.mint-chocolate

.peach-plum

.olive-mushroom

.raspberry-bubble-gum

To override a combo text color, apply a text color class directly to the element.

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

Outputs this:

Orange Blueberry


Gradients

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

.monochrome-gradient

.vanilla-cherry-gradient

.strawberry-banana-gradient

.orange-cream-gradient

.blueberry-pomegranate-gradient

.lemon-lime-gradient

.water-blueberry-gradient

.kiwi-cucumber-gradient

.vanilla-chocolate-gradient

.bubble-gum-grape-gradient

.blood-black-gradient

.mint-chocolate-gradient

.neapolitan

.pride-gradient

Download

Version 1.2