Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrmlnc/material-color
:high_brightness: The colour palette, based on Google's Material Design, for use in your project.
https://github.com/mrmlnc/material-color
colour-palette css google google-material less material scss stylus
Last synced: 2 months ago
JSON representation
:high_brightness: The colour palette, based on Google's Material Design, for use in your project.
- Host: GitHub
- URL: https://github.com/mrmlnc/material-color
- Owner: mrmlnc
- License: mit
- Created: 2014-07-24T20:20:16.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-28T20:06:13.000Z (over 7 years ago)
- Last Synced: 2024-04-14T06:36:02.095Z (8 months ago)
- Topics: colour-palette, css, google, google-material, less, material, scss, stylus
- Language: CSS
- Homepage:
- Size: 60.5 KB
- Stars: 133
- Watchers: 5
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material - material-color
README
# Material Design Color
> The colour palette, based on [Google's Material Design](http://www.google.com/design/spec/style/color.html), for use in your project.
## Installation
* git: `git clone git://github.com/mrmlnc/material-color.git`;
* bower: `bower install --save material-color`
* npm: `npm install --save material-design-color`;
## Supported languages
Support for all popular css preprocessors:
* [Less](http://lesscss.org/)
* [Sass](http://sass-lang.com/)
* [Stylus](http://learnboost.github.io/stylus/)
## How to use
Just import the file, whitch includes variables colors in your project.
```less
// Less, SCSS, Stylus
@import "lib/material-color";
```
**The build variable:**
`(@|$)clr-(color)-(range)`
* **(@|$)** - Sign of the variable in the preprocessor.
* **(color)** - Color.
* **(range)** - 100, 300, 700, A100 and so on. The default value of 500.
**Example:**
```less
@import "lib/material-color";
.example-1 {
background-color: @clr-blue;
}
.example-2 {
background-color: @clr-green-700;
}
```
**Additional variables**
Additional variables for text based on [Material Design Typography](http://www.google.com/design/spec/style/typography.html).
```
// Typography
clr-ui-display-4
clr-ui-display-3
clr-ui-display-2
clr-ui-display-1
clr-ui-headline
clr-ui-title
clr-ui-subhead-1
clr-ui-body-2
clr-ui-body-1
clr-ui-caption
clr-ui-menu
clr-ui-button
```
**Mixin**
There are provided lists of variables for looping through the colors. In order to use this functionality you must import file and call mixin(s):
```less
@import "mixins/class-generator";
// Less
.material-color-class("red"); // another color or "all"
.material-color-class("red", background-color); // another property or empty (default: color)
// SCSS
@include material-color-class("red"); // another color or "all"
@include material-color-class("red", background-color); // another property or empty (default: color)
// Stylus
material-color-class('red'); // another color or 'all'
material-color-class('red', background-color); // another property or empty (default: color)
```
## Thanks
* **Ali Amini** <[email protected]> ([@AliAmini](https://github.com/AliAmini))
* **Chris Pawlukiewicz** <[email protected]> ([@paynoattn](https://github.com/paynoattn))
## Changelog
See the [Releases section of our GitHub project](https://github.com/mrmlnc/material-color/releases) for changelogs for each release version.
## License
This software is released under the terms of the MIT license.