Skip to content

Instantly share code, notes, and snippets.

@AnotherKamila
Created January 10, 2019 13:27
Show Gist options
  • Select an option

  • Save AnotherKamila/365f98406eea74a3c523bfde08c6db48 to your computer and use it in GitHub Desktop.

Select an option

Save AnotherKamila/365f98406eea74a3c523bfde08c6db48 to your computer and use it in GitHub Desktop.
Building MDL (Material Design Lite, https://getmdl.io/) CSS with custom colours
  1. Clone and prepare the repo:

    $ git clone https://github.com/google/material-design-lite.git
    $ cd material-design-lite
    $ npm install
    $ sudo npm install -g gulp  # needed to build
  2. Set your colors in src/src/material-design-lite.scss, BEFORE the @import "variables"; line.
    The colours must be in "R,G,B" format (values 0-255).
    Example:

    [snip]
    /* Material Design Lite */
    
    // Customisation: add these varibles here
    $color-primary:      "7,54,66"   !default;
    $color-primary-dark: "0,43,54"   !default;
    $color-accent:       "133,153,0" !default;
    // You can also set these:
    // color-primary-contrast 
    // color-accent-contrast
    
    // Variables and mixins
    @import "variables";
    @import "mixins";
    [snip]
  3. Build and use it

    $ gulp
    $ cp -a dist/* path/to/your/website/assets
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment