top

download
Brutalist Framework

Flavors

Color Classes Library

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

core/css/flavors.css

Core Colors

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

Shades of Grey

  • .white / .vanilla
  • .cream
  • .coconut
  • .rice
  • .platinum
  • .mushroom
  • .silver
  • .smoke
  • .graphite
  • .grey / .gray
  • .fossil
  • .fog
  • .ash
  • .charcoal
  • .black

Shades of Red

  • .grapefruit
  • .strawberry
  • .rose
  • .cherry
  • .apple
  • .cranberry
  • .red / .tomato
  • .blood / .maroon
  • .blood-orange
  • .chili
  • .scarlet
  • .punch
  • .sangria
  • .mahogany

Shades of Pink

  • .bubblegum
  • .flamingo
  • .cotton-candy
  • .taffy
  • .blush
  • .pink
  • .hot-pink
  • .raspberry
  • .fuchsia
  • .salmon

Shades of Purple

  • .lilac
  • .lavender
  • .iris
  • .heather
  • .rebecca
  • .mauve
  • .purple
  • .eggplant
  • .grape
  • .raisin
  • .plum
  • .blackberry

Shades of Blue

  • .brittany
  • .sky
  • .water
  • .poolwater
  • .pastel
  • .olympic
  • .sapphire
  • .blue
  • .cornflower
  • .azure
  • .blueberry
  • .indigo
  • .denim

Shades of Brown

  • .wheat
  • .sand
  • .peanut
  • .cappuccino
  • .coffee
  • .brown
  • .steak
  • .cider
  • .cinnamon
  • .spice
  • .cocoa
  • .chocolate
  • .cola

Shades of Orange

  • .peach
  • .mango
  • .fire
  • .tangerine
  • .squash
  • .yam
  • .carrot
  • .orange
  • .pumpkin
  • .papaya
  • .rust
  • .bbq

Shades of Yellow

  • .butter
  • .yellow / .lemon
  • .cheddar
  • .caramel
  • .corn
  • .pineapple
  • .banana
  • .honey / .amber
  • .beer / .gold
  • .mustard
  • .flaxen
  • .dijon

Shades of Green

  • .mint
  • .kiwi
  • .pistachio
  • .sage
  • .pear
  • .lime
  • .slime
  • .green / .cucumber
  • .emerald
  • .spinach
  • .green-tea
  • .olive
  • .grass
  • .pickle
  • .seaweed

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

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:

  • .primary   
  • .secondary   
  • .tertiary   
  • .accent   
  • .auxilary   
  • .ocolor    (other)

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.


  • .monogradient


  • .cherry-delight


  • .happiness


  • .pina-colada


  • .deep-desire


  • .sprite


  • .aqua


  • .fresh


  • .piglet


  • .vanilla-chip


  • .mint-chip


  • .vampire


  • .passion


  • .neapolitan


  • .pride


  • .watermelon


  • .dragonfruit


  • .oreo


  • .peppermint


  • .bacon


  • .swedish


  • .octoberfest


  • .halloween


  • .caramel-apple


  • .ireland


  • .autumn


  • .winter


  • .spring


  • .summer


  • .lush


  • .evergreen


  • .viking


  • .violence


  • .emptiness


  • .clean


  • .socialize


  • .water-fairy


  • .river


  • .dusk


  • .sunset


  • .royalty


  • .aragon


  • .hottie


  • .virgin


  • .shades


  • .liminal


  • .checkerboard