Skip to content

Commit

Permalink
Regenerate after updating tachyons-cli
Browse files Browse the repository at this point in the history
  • Loading branch information
mrmrs committed Nov 1, 2016
1 parent af118ee commit 29d998b
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 75 deletions.
103 changes: 61 additions & 42 deletions README.md
View file
@@ -1,10 +1,10 @@
# css-filter-hue-rotate 0.0.7
# css-filter-hue-rotate 1.0.6

Css module of single purpose classes for filter hue rotate

#### Stats

285 | 32 | 32
331 | 32 | 64
---|---|---
bytes | selectors | declarations

Expand All @@ -16,32 +16,50 @@ bytes | selectors | declarations
npm install --save-dev css-filter-hue-rotate
```

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/css-filter-hue-rotate
```

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

## Usage

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

Import the css module

```css
@import "css-filter-hue-rotate";
```

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

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

#### Using the 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:

The built CSS is located in the `css` directory. It contains an unminified and minified version.
```
<link rel="stylesheet" href="http://unpkg.com/css-filter-hue-rotate@1.0.6/css/css-filter-hue-rotate.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
Expand All @@ -50,52 +68,52 @@ You can either cut and paste that css or link to it directly in your html.

#### 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 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
## The css

```css
/*
FILTER HUE ROTATE
*/
.hue-rotate1 { filter: hue-rotate( 45deg ); }
.hue-rotate2 { filter: hue-rotate( 90deg ); }
.hue-rotate3 { filter: hue-rotate( 135deg ); }
.hue-rotate4 { filter: hue-rotate( 180deg ); }
.hue-rotate5 { filter: hue-rotate( 225deg ); }
.hue-rotate6 { filter: hue-rotate( 270deg ); }
.hue-rotate7 { filter: hue-rotate( 315deg ); }
.hue-rotate8 { filter: hue-rotate( 360deg ); }
.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8 { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
@media screen and (min-width: 48em) {
.hue-rotate1-ns { filter: hue-rotate( 45deg ); }
.hue-rotate2-ns { filter: hue-rotate( 90deg ); }
.hue-rotate3-ns { filter: hue-rotate( 135deg ); }
.hue-rotate4-ns { filter: hue-rotate( 180deg ); }
.hue-rotate5-ns { filter: hue-rotate( 225deg ); }
.hue-rotate6-ns { filter: hue-rotate( 270deg ); }
.hue-rotate7-ns { filter: hue-rotate( 315deg ); }
.hue-rotate8-ns { filter: hue-rotate( 360deg ); }
.hue-rotate1-ns { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-ns { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-ns { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-ns { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-ns { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-ns { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-ns { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-ns { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}
@media screen and (min-width:48em) and (max-width: 64em) {
.hue-rotate1-m { filter: hue-rotate( 45deg ); }
.hue-rotate2-m { filter: hue-rotate( 90deg ); }
.hue-rotate3-m { filter: hue-rotate( 135deg ); }
.hue-rotate4-m { filter: hue-rotate( 180deg ); }
.hue-rotate5-m { filter: hue-rotate( 225deg ); }
.hue-rotate6-m { filter: hue-rotate( 270deg ); }
.hue-rotate7-m { filter: hue-rotate( 315deg ); }
.hue-rotate8-m { filter: hue-rotate( 360deg ); }
.hue-rotate1-m { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-m { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-m { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-m { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-m { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-m { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-m { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-m { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}
@media screen and (min-width: 64em) {
.hue-rotate1-l { filter: hue-rotate( 45deg ); }
.hue-rotate2-l { filter: hue-rotate( 90deg ); }
.hue-rotate3-l { filter: hue-rotate( 135deg ); }
.hue-rotate4-l { filter: hue-rotate( 180deg ); }
.hue-rotate5-l { filter: hue-rotate( 225deg ); }
.hue-rotate6-l { filter: hue-rotate( 270deg ); }
.hue-rotate7-l { filter: hue-rotate( 315deg ); }
.hue-rotate8-l { filter: hue-rotate( 360deg ); }
.hue-rotate1-l { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-l { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-l { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-l { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-l { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-l { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-l { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-l { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}
```

Expand All @@ -115,3 +133,4 @@ Running `$ npm start` will process the source CSS and place the built CSS in the
## License

ISC

64 changes: 32 additions & 32 deletions css/css-filter-hue-rotate.css
View file
@@ -1,42 +1,42 @@
/*
FILTER HUE ROTATE
*/
.hue-rotate1 { filter: hue-rotate( 45deg ); }
.hue-rotate2 { filter: hue-rotate( 90deg ); }
.hue-rotate3 { filter: hue-rotate( 135deg ); }
.hue-rotate4 { filter: hue-rotate( 180deg ); }
.hue-rotate5 { filter: hue-rotate( 225deg ); }
.hue-rotate6 { filter: hue-rotate( 270deg ); }
.hue-rotate7 { filter: hue-rotate( 315deg ); }
.hue-rotate8 { filter: hue-rotate( 360deg ); }
.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8 { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
@media screen and (min-width: 48em) {
.hue-rotate1-ns { filter: hue-rotate( 45deg ); }
.hue-rotate2-ns { filter: hue-rotate( 90deg ); }
.hue-rotate3-ns { filter: hue-rotate( 135deg ); }
.hue-rotate4-ns { filter: hue-rotate( 180deg ); }
.hue-rotate5-ns { filter: hue-rotate( 225deg ); }
.hue-rotate6-ns { filter: hue-rotate( 270deg ); }
.hue-rotate7-ns { filter: hue-rotate( 315deg ); }
.hue-rotate8-ns { filter: hue-rotate( 360deg ); }
.hue-rotate1-ns { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-ns { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-ns { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-ns { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-ns { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-ns { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-ns { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-ns { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}
@media screen and (min-width:48em) and (max-width: 64em) {
.hue-rotate1-m { filter: hue-rotate( 45deg ); }
.hue-rotate2-m { filter: hue-rotate( 90deg ); }
.hue-rotate3-m { filter: hue-rotate( 135deg ); }
.hue-rotate4-m { filter: hue-rotate( 180deg ); }
.hue-rotate5-m { filter: hue-rotate( 225deg ); }
.hue-rotate6-m { filter: hue-rotate( 270deg ); }
.hue-rotate7-m { filter: hue-rotate( 315deg ); }
.hue-rotate8-m { filter: hue-rotate( 360deg ); }
.hue-rotate1-m { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-m { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-m { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-m { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-m { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-m { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-m { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-m { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}
@media screen and (min-width: 64em) {
.hue-rotate1-l { filter: hue-rotate( 45deg ); }
.hue-rotate2-l { filter: hue-rotate( 90deg ); }
.hue-rotate3-l { filter: hue-rotate( 135deg ); }
.hue-rotate4-l { filter: hue-rotate( 180deg ); }
.hue-rotate5-l { filter: hue-rotate( 225deg ); }
.hue-rotate6-l { filter: hue-rotate( 270deg ); }
.hue-rotate7-l { filter: hue-rotate( 315deg ); }
.hue-rotate8-l { filter: hue-rotate( 360deg ); }
.hue-rotate1-l { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
.hue-rotate2-l { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
.hue-rotate3-l { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
.hue-rotate4-l { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
.hue-rotate5-l { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
.hue-rotate6-l { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
.hue-rotate7-l { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
.hue-rotate8-l { -webkit-filter: hue-rotate( 360deg ); filter: hue-rotate( 360deg ); }
}

2 changes: 1 addition & 1 deletion css/css-filter-hue-rotate.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 29d998b

Please sign in to comment.