0.1.5 • Published 6 years ago
flat-ui-colors-helper v0.1.5
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>