flat-ui-colors-helper
v0.1.5
Published
CSS helpers for Flat UI Colors
Downloads
18
Maintainers
Readme
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>