Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/misterzik/colores
Color.es is a tiny bit CSS library fueled with SCSS on the back.
https://github.com/misterzik/colores
color-palette css exciting-colors scss tones
Last synced: 4 days ago
JSON representation
Color.es is a tiny bit CSS library fueled with SCSS on the back.
- Host: GitHub
- URL: https://github.com/misterzik/colores
- Owner: misterzik
- License: gpl-3.0
- Created: 2017-07-03T23:20:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-22T04:47:27.000Z (over 4 years ago)
- Last Synced: 2024-12-01T01:07:45.802Z (21 days ago)
- Topics: color-palette, css, exciting-colors, scss, tones
- Homepage:
- Size: 141 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Color.es
---
#### Colores also known as Color.es
Color.es is a tiny bit CSS library fueled with SCSS on the back.
### Installation
* Download [ZIP](https://github.com/misterzik/Colores/archive/master.zip) or Clone Project
* Bower
`bower install colores`
### Usage
Color.es comes with a built-in demo, Please refer to folder `/public`. If you would like to skip the demo, all you have to do is:
1. Include the `css` files located in the `dist` folder on your root folder.
2. Include this new files on your `index.html`.
```
```
3. Use the Class name `colores` to get the classes style properly place on your DOM, follow up with the color from the default palette.
Example )
For this example, I am going to use the color yellow in default/primary color.
`colores yellow` - This will change the color of the container or background.
How About RED?
Pretty Simple, same idea behind, start by specifying the class name `colores` follow by the color `red`
```
IS MY BG RED?
```
#### W00t! w00t!, Sweet, but how about if i want to change the text color,
It's okay, we got ya all cover, now since we only want the text color to change instead of the background color
we are going to replace the class name `colores` for `txt-cls` follow by the color
```
txt-cls yellow
```
#### HTML:
```
This is a Yellow Box
```
```
This is a Yellow Text
```
###### Put it together:
```
This is a Yellow Box
This is a Dark Yellow Text
```
###### Colores Variations:
Use the proper class to change the style desired `txt-cls` or
`colores yellow`
Asides from that we have also included three tones asides from library primary tone in order to use it
you just have to specify the tone, if left blank the tone will go instantly to primary, you have three options light, dark, and darker
depending on the option you will get the right property, per example.
```
colores yellow = Default Tone
colores yellow-light = Lighter tone from Default
colores yellow-dark = Dark tone from Default
colores yellow-darker = Darker tone from Dark Tone
```
### Default Color Palette
| Class Name | Color Name | Extra Option |
| ------------|:-------------:| -----------------:|
| colores | yellow | light,dark,darker |
| colores | blue | light,dark,darker |
| colores | red | light,dark,darker |
| colores | pink | light,dark,darker |
| colores | orange | light,dark,darker |
| colores | mz-orange | light,dark,darker |
| colores | purple | light,dark,darker |
| colores | cyan | light,dark,darker |
| colores | grey | light,dark,darker |
| colores | brown | light,dark,darker |
| colores | green | light,dark,darker |