The colour palette, based on Google's Material Design, for use in your project.

• git: git clone git://github.com/mrmlnc/material-color.git;
• bower: bower install --save material-color
• npm: npm install --save material-design-color;

Support for all popular css preprocessors:

• Less
• Sass
• Stylus

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)

• Ali Amini <aliamini.af@gmail.com> (@AliAmini)
• Chris Pawlukiewicz <hi@paynoattn.com> (@paynoattn)

See the Releases section of our GitHub project for changelogs for each release version.

This software is released under the terms of the MIT license.