Material-design-colors NPM

Google Material Design color palette

The Google Material Design color palette for Sass and Less

Provides quick color palettes for Sass and Less projects.

Install

You may install this module via bower or npm.

$ bower install material-design-colors
$ npm install material-design-colors

Quick use

Sass

To use the Sass variables, you can import the colors file like this:

@import 'material-design-colors/colors'

.btn {
    color: $white-color;
    background-color: $red-500-color;
}

Less

To use the Less variables, you can import the colors file like this:

@import 'material-design-colors/colors'

.btn {
    color: @white-color;
    background-color: @red-500-color;
}

Classes

To use the CSS classes variables, you can import the dist/material-design.min.css CSS in your html.

There is two different set of CSS classes :

The ones made to change the color attribute (.{color}-{accent}-cl)
The ones made to change the background-color attribute (.{color}-{accent}-bg)

<html>
    <head>
        <link rel="stylesheet" href="material-design-colors/dist/material-design.min.css" />
    </head>
    
    <body>
        <button class="white-cl red-500-bg">Material design colors</button>
    </body>
</html>

License

This module is released under the MIT license.

https://github.com/ValentinGot/material-design-colors/blob/master/LICENSE

Sass Less Material Design color color palette

@everything-registry/sub-chunk-2137 @zalastax/nolb-material-

1.0.2

7 years ago

1.0.1

8 years ago

1.0.0

8 years ago