Flavors

Color Classes Library

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

Back to Top ↑

Core Colors

Use these classes to apply a color background.

.white / .vanilla / .cream

.vanilla-bean

.coconut

.rice

.silver

.mushroom

.platinum

.grey / .gray

.charcoal

.black

.grapefruit

.strawberry

.cherry

.black-cherry

.fruit-punch

.red / .tomato

.blood / .maroon / .pomegranate

.blood-orange

.bubble-gum

.salmon

.pink-champagne

.pink

.cotton-candy

.raspberry

.lilac

.purple / .plum

.lavender / .light-purple

.grape

.eggplant

.deep-plum

.light-blue / .water

.pool-water

.blue-candy

.blue

.sky

.cornflower

.blueberry

.navy

.pastel-blue

.midnight

.orange

.pumpkin

.mango

.tangerine

.fire

.squash

.peach

.carrot

.rust

.deep-orange

.wheat

.peanut / .peanut-butter

.light-brown / .cappuccino

.brown

.bbq

.steak

.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 .honey-text .blue-text .dark-chocolate-text

Text Shadow

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

EXAMPLES:

.lime-text-shadow .yellow-text-shadow .blue-text-shadow .bubble-gum-text-shadow

Border & Outline Color

Simply apply -border or -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.

EXAMPLES:

Solid Thick Water Border
.water-border

Dashed Thick Green border with Fat Plum Outline
.plum-outline .green-border

Dotted Thick Cheddar Border
.cheddar-border

.red-outline

Dashed Thin Black Cherry Border
.black-cherry-border

.green-border .green-outline

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.

.success

.info

.warning

.alert

.ready

.disabled

.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

.silver-blood

.mango-cherry

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>

Output:

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 / .rainbow


.watermelon


.dragonfruit


.oreo


.peppermint


.bacon

Download

Version 1.9