Nefarious Pickle Muncher

    flat-ui-colors-helper

    0.1.5 • Public • Published

    Flat UI Colors Helper

    Greenkeeper 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>

    Install

    npm i flat-ui-colors-helper

    DownloadsWeekly Downloads

    10

    Version

    0.1.5

    License

    GPL-3.0

    Last publish

    Collaborators

    • maartenpaauw