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: about 1 month 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 (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-07-28T20:06:13.000Z (almost 7 years ago)
• Last Synced: 2024-04-14T06:36:02.095Z (3 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

Lists

• 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.