Flat UI Colors Helper

CSS helpers for Flat UI Colors

Installation

Install with Yarn:

yarn add flat-ui-colors-helper

Install with NPM:

npm install flat-ui-colors-helper --save

Color names

Color name	Color variable
Turquoise	turquoise
Green Sea	green-sea
Emerald	emerald
Nephritis	nephritis
Peter River	peter-river
Belize Hole	belize-hole
Amethyst	amethyst
Wisteria	wisteria
Wet Asphalt	wet-asphalt
Midnight Blue	midnight-blue
Sun Flower	sun-flower
Orange	orange
Carrot	carrot
Pumpkin	pumpkin
Alizarin	alizarin
Pomegranate	pomegranate
White	white
Clouds	clouds
Silver	silver
Concrete	concrete
Asbestos	asbestos
Black	black

Helpers

Color

Example code for (text) color classes.

<div class="[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="hover-[INSERT_COLOR_VARIABLE_HERE]"></div>

Background

Example code for background classes.

<div class="background-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="background-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>

Border

Example code for border classes.

<div class="border-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-left-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-right-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-top-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-bottom-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-x-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-y-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-left-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-right-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-top-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-bottom-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-x-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="border-y-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>

Column Rule

Example code for column rule classes.

<div class="column-rule-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="column-rule-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>

Outline

Example code for outline classes.

<div class="outline-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="outline-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>

Text Decoration

Example code for text decoration classes.

<div class="text-decoration-[INSERT_COLOR_VARIABLE_HERE]"></div>
<div class="text-decoration-hover-[INSERT_COLOR_VARIABLE_HERE]"></div>