sass-material-colors

    0.0.5 • Public • Published

    Sass Material Colors Gem Version

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

    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:

    <!-- HTML -->
    <div class='my-cool-element color-cyan-400 bg-color-blue-grey-600'></div>

    TO-DO

    • Make it bower friendly
    • 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.

    Install

    npm i sass-material-colors

    DownloadsWeekly Downloads

    1,762

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • minusfive