# flat-ui-colors-helper

> CSS helpers for Flat UI Colors

Latest version **0.1.5** (published 2017-12-04) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install flat-ui-colors-helper
pnpm add flat-ui-colors-helper
yarn add flat-ui-colors-helper
bun add flat-ui-colors-helper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2017-12-04 |
| First published | 2017-08-31 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Maarten Paauw |
| Maintainers | maartenpaauw |
| Keywords | flat ui colors, flatuicolors, helper, classes |

## Links

- npm: https://www.npmjs.com/package/flat-ui-colors-helper
- Repository: https://github.com/maartenpaauw/flat-ui-colors-helper
- Issues: https://github.com/maartenpaauw/flat-ui-colors-helper/issues
- npm.io page: https://npm.io/package/flat-ui-colors-helper

## Recent versions

- 0.1.5 (latest) — 2017-12-04
- 0.1.4 — 2017-10-29
- 0.1.3 — 2017-09-26
- 0.1.2 — 2017-09-10
- 0.1.1 — 2017-08-31
- 0.1.0 — 2017-08-31
- 0.0.3 — 2017-08-31

## README

# Flat UI Colors Helper
[![Greenkeeper](https://badges.greenkeeper.io/maartenpaauw/flat-ui-colors-helper.svg)](https://greenkeeper.io/)
[![Build Status](https://travis-ci.org/maartenpaauw/flat-ui-colors-helper.svg?branch=master)](https://travis-ci.org/maartenpaauw/flat-ui-colors-helper)
[![Development Dependencies Status](https://david-dm.org/maartenpaauw/flat-ui-colors-helper/dev-status.svg)](https://david-dm.org/maartenpaauw/flat-ui-colors-helper?type=dev)
[![npm (tag)](https://img.shields.io/npm/v/flat-ui-colors-helper.svg)](https://www.npmjs.com/package/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.

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

### Background

Example code for background classes.

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

### Border

Example code for border classes.

```html
<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.

```html
<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.

```html
<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.

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

---
_Source: https://npm.io/package/flat-ui-colors-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._