sass-material-colors

by minusfive

An easy way to use Google's Material Design colors in your Sass/Scss project

123 Stars 21 Forks Last release: Not found MIT License 21 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Sass Material Colors GitHub version

An easy way to use Google's Material Design color palette on your Sass project.

Gem Version Bower version npm version

Installation

Sass Material Colors can be included as a Ruby Gem, a Bower component, or a Node Packaged Module (npm).

Ruby Gem

Add this line to your application's Gemfile:

$ gem 'sass-material-colors'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sass-material-colors

Bower Component

Install

sass-material-colors
as a development dependency:
$ bower install --save-dev sass-material-colors

Node Packaged Module (npm)

Install

sass-material-colors
as a development dependency:
$ npm install --save-dev sass-material-colors

Usage

Import the colors map + function to your project:

// Sass
@import 'sass-material-colors'

If you're using Bower or npm, you may need to use the relative path to the main file, e.g.:

// Sass

// Bower @import 'bower_components/sass-material-colors/sass/sass-material-colors'

// npm @import 'node_modules/sass-material-colors/sass/sass-material-colors'

By importing this file, a

$material-colors
Sass map will be added to your Sass project, with all the colors from Google's palette, as well as a
material-color
function
, making it easy for you to reference any color in the spec from your stylesheets.

Optionally, you can import a list of placeholder selectors and/or classes.

The
material-color
Function

The

material-color
function allows you to easily reference any color in the
_sass-material-colors-map.scss
file in your styles:
// Sass
.my-cool-element
  color: material-color('cyan', '400')
  background: material-color('blue-grey', '600')

The

material-color
function takes 2 parameters:
$color-name
String (quoted), Required

Lower-case, dasherized color name from Google's palette (e.g.

'pink'
,
'amber'
,
'blue-grey'
,
'deep-orange'
, etc.)
$color-variant
String (quoted), Optional [Default value:
500
]

Lower-case color variant number/code from Google's palette (e.g.

'300'
,
'200'
,
'a100'
,
'a400'
, etc.)

It's important for these parameters to be quoted strings, in order to maintain compatibility with Libsass.

Predefined Sass Placeholder Selectors

You can include a list of extendable Sass placeholder selectors in your project by importing the

sass-material-colors-placeholders
file into your Sass/Scss:
// Sass
@import 'sass-material-colors-placeholders'

This will add a

%color-...
and
%bg-color-...
placeholder selector for each color name and variant found in Google's palette to your project, which you can then extend in your stylesheets like so:
// Sass
.my-cool-element
  @extend %color-cyan-400
  @extend %bg-color-blue-grey-600

Predefined Classes

You can include a list of predefined classes in your project by importing the

sass-material-colors-classes
file into your Sass/Scss:
// Sass
@import 'sass-material-colors-classes'

This will add a

.color-...
and
.bg-color-...
class for each color name and variant found in Google's palette to your stylesheets, which you can then use directly in your markup like so:

TO-DO

  • [x] ~~Make it bower friendly~~
  • [x] ~~Make it npm friendly~~
  • [ ] Create ember-cli addon
  • [ ] Pre-compile
    -placeholders
    and
    -classes
    files
  • [ ] Separate color (text) and background classes
  • [ ] Add tests
  • [ ] Add changelog

Contributing

See CONTRIBUTING.

License

See LICENSE.

Special Thanks

To nilskaspersson/Google-Material-UI-Color-Palette for the inspiration on using a Sass map for the colors, and a map function to retrieve them.

To twbs/bootstrap-sass as a reference for this gem.

And to Google for their Material Design spec.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.