# css3-colors
Css3-colors is a package that helps you with color management, `css3-colors` brings variable classes with the colors that have the package [`scss-colors`](https://github.com/yoicalsin/sass-colors)
To see all the colors and their shades, click [here](https://yoicalsin.github.io/sass-colors/)
## 🎉 Colors Demo
Preview live click [here](https://yoicalsin.github.io/sass-colors/)
## 📦 Installation
Before using, we have to **install** the package via npm or download it directly !
```bash
# To install
npm install --save css3-colors
```
## ▶️ Usage
To use it is very simple, first you have to import the css file into your main file of _html_.
When you install or download the package you will have two css files, `index.css` and `index.min.css`
- File `index.css` this file is customizable as it is not mined.
- File `index.min.css` this file brings all the classes with the colors, but unlike the other one, this one will come mirified, that is to say to use it in production.
```html
css-colors - Created by Yoni Calsin
```
But if you want to import it from javascript, you will have to do it this way:
```js
import '~css3-colors/dist/index.css';
```
### 🎨 Color classes
To be able to use the classes are as follows.
The colors are iterated from a map !
```scss
/**
* Red Colors
**/
$red: (
'base': #f44336,
'lighten-5': #ffebee,
'lighten-4': #ffcdd2,
'lighten-3': #ef9a9a,
'lighten-2': #e57373,
'lighten-1': #ef5350,
'darken-1': #e53935,
'darken-2': #d32f2f,
'darken-3': #c62828,
'darken-4': #b71c1c,
'accent-1': #ff8a80,
'accent-2': #ff5252,
'accent-3': #ff1744,
'accent-4': #d50000,
);
```
For example we will use the color red, and if you want more simply add the classes of `.lighten-{number}` or `.accent-{number}`.
```html
Css3-colors
```
To give colors to the texts, it is also very simple, you can use the same classes, _you will have to add the word `-text` to the **end**_
```html
Red title - lighten-3
```
## ⭐ Support for
css3-colors is an open source project licensed by [MIT](LICENSE). You can grow thanks to the sponsors and the support of the amazing sponsors. If you want to join them, [contact me here](mailto:helloyoicalsin@gmail.com).
## 🎩 Stay in touch
- Author [Yoni Calsin](https://github.com/yoicalsin)
- Twitter [Yoni Calsin](https://twitter.com/yoicalsin)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## 📜 License
css3-colors is [MIT licensed](LICENSE).
## 🎉 Colors Demo
Preview live click [here](https://yoicalsin.github.io/sass-colors/)
## 📦 Installation
Before using, we have to **install** the package via npm or download it directly !
```bash
# To install
npm install --save css3-colors
```
## ▶️ Usage
To use it is very simple, first you have to import the css file into your main file of _html_.
When you install or download the package you will have two css files, `index.css` and `index.min.css`
- File `index.css` this file is customizable as it is not mined.
- File `index.min.css` this file brings all the classes with the colors, but unlike the other one, this one will come mirified, that is to say to use it in production.
```html
