Material Design Color Palette: LESS/CSS toolkit
CSS JavaScript
Clone or download
Latest commit ce7e6d8 Nov 16, 2015
Permalink
Failed to load latest commit information.
css Remove version number from CSS Aug 30, 2015
grunt Update grunt files Aug 30, 2015
less Update LESS files Aug 30, 2015
.gitignore Update .gitignore Nov 16, 2015
Gruntfile.js Add grunt support Jul 9, 2015
LICENSE MD Color Palette version 1.0.0 Dec 23, 2014
README.md Update WebMoney link Nov 16, 2015
bower.json Update bower Jul 9, 2015
package.json Bump version to 1.1.0 Aug 30, 2015

README.md

Material Design Color Palette 1.1.0

![Latest Version](https://img.shields.io/github/release/zavoloklom/material-design-color-palette.svg?style=flat-square&label=latest version) ![Software License](https://img.shields.io/badge/license-MIT License-blue.svg?style=flat-square) Total Downloads

NPM Dependency DevDependency Last Month Downloads

Material Design Color Palette

Material Design Color Palette: LESS/CSS toolkit

Color palette created and maintained by Google.

This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.

Get started at http://zavoloklom.github.io/material-design-color-palette

Download: 1.1.0 (ZIP)

Install

Bower: bower install material-design-color-palette

Getting started

BASIC: Default CSS

Use this method to get the default Material Design Color Palette CSS.

  • Download latest version of Material Design Color Palette.
  • Unpack the entire material-design-color-palette archive into your project.
  • In the of your html, reference the location to your material-design-color-palette.min.css. <link rel="stylesheet" href="path/to/material-design-color-palette/css/material-design-color-palette.min.css">
  • Check out the Examples pages to start using Material Design Color Palette!

PRO: Custom LESS

Use this method to customize Material Design Color Palette using LESS.

  • Download latest version of Material Design Color Palette.
  • Unpack the entire material-design-color-palette archive into your project.
  • Open your project's path/to/material-design-color-palette/less/variables/colors.less to change HEX values.
  • Open your project's path/to/material-design-color-palette/less/variables/main.less to change prefixes @zmdc-css-prefix, @zmdc-text-prefix and @zmdc-bg-prefix.

Css class template: {@zmdc-css-prefix}-{@zmdc-text-prefix or @zmdc-bg-prefix}-{color name}-{color value}. Example: mdc-text-red-400

  • Re-compile your LESS if using a static compiler.
  • Check out the Examples pages to start using Material Design Color Palette!

License

Changelog

  • 1.1.0 - add some changes into LESS mixins and variables
  • 1.0.0 - add all colors from Google

Versioning

Material Design Color Palette will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

  • New colors from Google or changes that breaking backward compatibility bumps the major (and resets the minor and patch)
  • New additions without breaking backward compatibility bumps the minor (and resets the patch)
  • Bug fixes and misc changes bumps the patch

For more information on SemVer, please visit http://semver.org.

Author

Donate