material-design-color

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
material-design-color
13312.3.26 years ago7 years agoMinified + gzip package size for material-design-color in KB

Readme

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:
Less Sass Stylus

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 <aliamini.af@gmail.com> (@AliAmini) Chris Pawlukiewicz <hi@paynoattn.com> (@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.