

# SKINS

### Docs

http://tachyons.io/docs/themes/skins/

Classes for setting foreground and background colors on elements.
If you haven't declared a border color, but set border on an element, it will
be set to the current text color.


### Stats

1013 | 286 | 286
---|---|---
bytes | selectors | declarations

## Installation

#### With [npm](https://npmjs.com)

```
npm install --save-dev tachyons
```

Learn more about using css installed with npm:
* https://webpack.github.io/docs/stylesheets.html
* https://github.com/defunctzombie/npm-css

#### With Git

http:
```
git clone https://github.com/tachyons-css/tachyons
```

ssh:
```
git clone git@github.com:tachyons-css/tachyons.git
```

## Usage

#### Using with [Postcss](https://github.com/postcss/postcss)

Import the css module

```css
@import "tachyons";
```

Then process the css using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli)

```sh
$ npm i -g tachyons-cli
$ tachyons path/to/css-file.css > dist/t.css
```

#### Using the css

##### CDN
The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

```
<link rel="stylesheet" href="http://unpkg.com/tachyons@7.0.1-5/css/tachyons.min.css" />
```

##### Locally
The built css is located in the `css` directory. It contains an unminified and minified version.
You can either cut and paste that css or link to it directly in your html.

```html
<link rel="stylesheet" href="path/to/module/css/tachyons">
```

#### Development

The source css files can be found in the `src` directory.
Running `$ npm start` will process the source css and place the built css in the `css` directory.

## The css

```css
/*!!!

# SKINS

### Docs

http://tachyons.io/docs/themes/skins/

Classes for setting foreground and background colors on elements.
If you haven't declared a border color, but set border on an element, it will
be set to the current text color.
*/
/* Text colors */
.color-inherit { color: inherit; }
.black-90 { color: undefined; }
.black-80 { color: undefined; }
.black-70 { color: undefined; }
.black-60 { color: undefined; }
.black-50 { color: undefined; }
.black-40 { color: undefined; }
.black-30 { color: undefined; }
.black-20 { color: undefined; }
.black-10 { color: undefined; }
.black-05 { color: undefined; }
.white-90 { color: undefined; }
.white-80 { color: undefined; }
.white-70 { color: undefined; }
.white-60 { color: undefined; }
.white-50 { color: undefined; }
.white-40 { color: undefined; }
.white-30 { color: undefined; }
.white-20 { color: undefined; }
.white-10 { color: undefined; }
.black { color: undefined; }
.gray-0 { color: undefined; }
.gray-1 { color: undefined; }
.gray-2 { color: undefined; }
.gray-3 { color: undefined; }
.gray-4 { color: undefined; }
.gray-5 { color: undefined; }
.gray-6 { color: undefined; }
.gray-7 { color: undefined; }
.gray-8 { color: undefined; }
.gray-9 { color: undefined; }
.gray-10 { color: undefined; }
.white { color: undefined; }
.green-0 { color: undefined; }
.green-1 { color: undefined; }
.green-2 { color: undefined; }
.green-3 { color: undefined; }
.green-4 { color: undefined; }
.green-5 { color: undefined; }
.green-6 { color: undefined; }
.green-7 { color: undefined; }
.green-8 { color: undefined; }
.green-9 { color: undefined; }
.green-10 { color: undefined; }
.teal-0 { color: undefined; }
.teal-1 { color: undefined; }
.teal-2 { color: undefined; }
.teal-3 { color: undefined; }
.teal-4 { color: undefined; }
.teal-5 { color: undefined; }
.teal-6 { color: undefined; }
.teal-7 { color: undefined; }
.teal-8 { color: undefined; }
.teal-9 { color: undefined; }
.teal-10 { color: undefined; }
.cyan-0 { color: undefined; }
.cyan-1 { color: undefined; }
.cyan-2 { color: undefined; }
.cyan-3 { color: undefined; }
.cyan-4 { color: undefined; }
.cyan-5 { color: undefined; }
.cyan-6 { color: undefined; }
.cyan-7 { color: undefined; }
.cyan-8 { color: undefined; }
.cyan-9 { color: undefined; }
.cyan-10 { color: undefined; }
.blue-0 { color: undefined; }
.blue-1 { color: undefined; }
.blue-2 { color: undefined; }
.blue-3 { color: undefined; }
.blue-4 { color: undefined; }
.blue-5 { color: undefined; }
.blue-6 { color: undefined; }
.blue-7 { color: undefined; }
.blue-8 { color: undefined; }
.blue-9 { color: undefined; }
.blue-10 { color: undefined; }
.indigo-0 { color: undefined; }
.indigo-1 { color: undefined; }
.indigo-2 { color: undefined; }
.indigo-3 { color: undefined; }
.indigo-4 { color: undefined; }
.indigo-5 { color: undefined; }
.indigo-6 { color: undefined; }
.indigo-7 { color: undefined; }
.indigo-8 { color: undefined; }
.indigo-9 { color: undefined; }
.indigo-10 { color: undefined; }
.purple-0 { color: undefined; }
.purple-1 { color: undefined; }
.purple-2 { color: undefined; }
.purple-3 { color: undefined; }
.purple-4 { color: undefined; }
.purple-5 { color: undefined; }
.purple-6 { color: undefined; }
.purple-7 { color: undefined; }
.purple-8 { color: undefined; }
.purple-9 { color: undefined; }
.purple-10 { color: undefined; }
.pink-0 { color: undefined; }
.pink-1 { color: undefined; }
.pink-2 { color: undefined; }
.pink-3 { color: undefined; }
.pink-4 { color: undefined; }
.pink-5 { color: undefined; }
.pink-6 { color: undefined; }
.pink-7 { color: undefined; }
.pink-8 { color: undefined; }
.pink-9 { color: undefined; }
.pink-10 { color: undefined; }
.red-0 { color: undefined; }
.red-1 { color: undefined; }
.red-2 { color: undefined; }
.red-3 { color: undefined; }
.red-4 { color: undefined; }
.red-5 { color: undefined; }
.red-6 { color: undefined; }
.red-7 { color: undefined; }
.red-8 { color: undefined; }
.red-9 { color: undefined; }
.red-10 { color: undefined; }
.orange-0 { color: undefined; }
.orange-1 { color: undefined; }
.orange-2 { color: undefined; }
.orange-3 { color: undefined; }
.orange-4 { color: undefined; }
.orange-5 { color: undefined; }
.orange-6 { color: undefined; }
.orange-7 { color: undefined; }
.orange-8 { color: undefined; }
.orange-9 { color: undefined; }
.orange-10 { color: undefined; }
.yellow-0 { color: undefined; }
.yellow-1 { color: undefined; }
.yellow-2 { color: undefined; }
.yellow-3 { color: undefined; }
.yellow-4 { color: undefined; }
.yellow-5 { color: undefined; }
.yellow-6 { color: undefined; }
.yellow-7 { color: undefined; }
.yellow-8 { color: undefined; }
.yellow-9 { color: undefined; }
.yellow-10 { color: undefined; }
/* Background colors */
.bg-transparent { background-color: undefined; }
.bg-black-90 { background-color: undefined; }
.bg-black-80 { background-color: undefined; }
.bg-black-70 { background-color: undefined; }
.bg-black-60 { background-color: undefined; }
.bg-black-50 { background-color: undefined; }
.bg-black-40 { background-color: undefined; }
.bg-black-30 { background-color: undefined; }
.bg-black-20 { background-color: undefined; }
.bg-black-10 { background-color: undefined; }
.bg-black-05 { background-color: undefined; }
.bg-white-90 { background-color: undefined; }
.bg-white-80 { background-color: undefined; }
.bg-white-70 { background-color: undefined; }
.bg-white-60 { background-color: undefined; }
.bg-white-50 { background-color: undefined; }
.bg-white-40 { background-color: undefined; }
.bg-white-30 { background-color: undefined; }
.bg-white-20 { background-color: undefined; }
.bg-white-10 { background-color: undefined; }
.bg-black { background-color: undefined; }
.bg-gray-0 { background-color: undefined; }
.bg-gray-1 { background-color: undefined; }
.bg-gray-2 { background-color: undefined; }
.bg-gray-3 { background-color: undefined; }
.bg-gray-4 { background-color: undefined; }
.bg-gray-5 { background-color: undefined; }
.bg-gray-6 { background-color: undefined; }
.bg-gray-7 { background-color: undefined; }
.bg-gray-8 { background-color: undefined; }
.bg-gray-9 { background-color: undefined; }
.bg-gray-10 { background-color: undefined; }
.bg-white { background-color: undefined; }
.bg-green-0 { background-color: undefined; }
.bg-green-1 { background-color: undefined; }
.bg-green-2 { background-color: undefined; }
.bg-green-3 { background-color: undefined; }
.bg-green-4 { background-color: undefined; }
.bg-green-5 { background-color: undefined; }
.bg-green-6 { background-color: undefined; }
.bg-green-7 { background-color: undefined; }
.bg-green-8 { background-color: undefined; }
.bg-green-9 { background-color: undefined; }
.bg-green-10 { background-color: undefined; }
.bg-teal-0 { background-color: undefined; }
.bg-teal-1 { background-color: undefined; }
.bg-teal-2 { background-color: undefined; }
.bg-teal-3 { background-color: undefined; }
.bg-teal-4 { background-color: undefined; }
.bg-teal-5 { background-color: undefined; }
.bg-teal-6 { background-color: undefined; }
.bg-teal-7 { background-color: undefined; }
.bg-teal-8 { background-color: undefined; }
.bg-teal-9 { background-color: undefined; }
.bg-teal-10 { background-color: undefined; }
.bg-cyan-0 { background-color: undefined; }
.bg-cyan-1 { background-color: undefined; }
.bg-cyan-2 { background-color: undefined; }
.bg-cyan-3 { background-color: undefined; }
.bg-cyan-4 { background-color: undefined; }
.bg-cyan-5 { background-color: undefined; }
.bg-cyan-6 { background-color: undefined; }
.bg-cyan-7 { background-color: undefined; }
.bg-cyan-8 { background-color: undefined; }
.bg-cyan-9 { background-color: undefined; }
.bg-cyan-10 { background-color: undefined; }
.bg-blue-0 { background-color: undefined; }
.bg-blue-1 { background-color: undefined; }
.bg-blue-2 { background-color: undefined; }
.bg-blue-3 { background-color: undefined; }
.bg-blue-4 { background-color: undefined; }
.bg-blue-5 { background-color: undefined; }
.bg-blue-6 { background-color: undefined; }
.bg-blue-7 { background-color: undefined; }
.bg-blue-8 { background-color: undefined; }
.bg-blue-9 { background-color: undefined; }
.bg-blue-10 { background-color: undefined; }
.bg-indigo-0 { background-color: undefined; }
.bg-indigo-1 { background-color: undefined; }
.bg-indigo-2 { background-color: undefined; }
.bg-indigo-3 { background-color: undefined; }
.bg-indigo-4 { background-color: undefined; }
.bg-indigo-5 { background-color: undefined; }
.bg-indigo-6 { background-color: undefined; }
.bg-indigo-7 { background-color: undefined; }
.bg-indigo-8 { background-color: undefined; }
.bg-indigo-9 { background-color: undefined; }
.bg-indigo-10 { background-color: undefined; }
.bg-purple-0 { background-color: undefined; }
.bg-purple-1 { background-color: undefined; }
.bg-purple-2 { background-color: undefined; }
.bg-purple-3 { background-color: undefined; }
.bg-purple-4 { background-color: undefined; }
.bg-purple-5 { background-color: undefined; }
.bg-purple-6 { background-color: undefined; }
.bg-purple-7 { background-color: undefined; }
.bg-purple-8 { background-color: undefined; }
.bg-purple-9 { background-color: undefined; }
.bg-purple-10 { background-color: undefined; }
.bg-pink-0 { background-color: undefined; }
.bg-pink-1 { background-color: undefined; }
.bg-pink-2 { background-color: undefined; }
.bg-pink-3 { background-color: undefined; }
.bg-pink-4 { background-color: undefined; }
.bg-pink-5 { background-color: undefined; }
.bg-pink-6 { background-color: undefined; }
.bg-pink-7 { background-color: undefined; }
.bg-pink-8 { background-color: undefined; }
.bg-pink-9 { background-color: undefined; }
.bg-pink-10 { background-color: undefined; }
.bg-red-0 { background-color: undefined; }
.bg-red-1 { background-color: undefined; }
.bg-red-2 { background-color: undefined; }
.bg-red-3 { background-color: undefined; }
.bg-red-4 { background-color: undefined; }
.bg-red-5 { background-color: undefined; }
.bg-red-6 { background-color: undefined; }
.bg-red-7 { background-color: undefined; }
.bg-red-8 { background-color: undefined; }
.bg-red-9 { background-color: undefined; }
.bg-red-10 { background-color: undefined; }
.bg-orange-0 { background-color: undefined; }
.bg-orange-1 { background-color: undefined; }
.bg-orange-2 { background-color: undefined; }
.bg-orange-3 { background-color: undefined; }
.bg-orange-4 { background-color: undefined; }
.bg-orange-5 { background-color: undefined; }
.bg-orange-6 { background-color: undefined; }
.bg-orange-7 { background-color: undefined; }
.bg-orange-8 { background-color: undefined; }
.bg-orange-9 { background-color: undefined; }
.bg-orange-10 { background-color: undefined; }
.bg-yellow-0 { background-color: undefined; }
.bg-yellow-1 { background-color: undefined; }
.bg-yellow-2 { background-color: undefined; }
.bg-yellow-3 { background-color: undefined; }
.bg-yellow-4 { background-color: undefined; }
.bg-yellow-5 { background-color: undefined; }
.bg-yellow-6 { background-color: undefined; }
.bg-yellow-7 { background-color: undefined; }
.bg-yellow-8 { background-color: undefined; }
.bg-yellow-9 { background-color: undefined; }
.bg-yellow-10 { background-color: undefined; }
```

## Contributing

1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request

## Authors

* [mrmrs](http://mrmrs.io)
* [johno](http://johnotander.com)

## License

ISC

