Skip to content

maartenpaauw/flat-ui-colors-helper

Repository files navigation

Flat UI Colors Helper

Build Status Development Dependencies Status npm (tag)

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>