Material Design Color
The colour palette, based on Google's Material Design, 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:
How to use
Just import the file, whitch includes variables colors in your project.
// 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:
@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.
// 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):
@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)
- Chris Pawlukiewicz <[email protected]> (@paynoattn)
Changelog
See the Releases section of our GitHub project for changelogs for each release version.
License
This software is released under the terms of the MIT license.