material-design

We are using material-design-light as the CSS framework for this site.

customize

To build out the custom color scheme for mdl, first you will need node.js installed.

Then we clone the material design lite repo and install required modules:

git clone https://github.com/google/material-design-lite.git
cd material-design-lite
npm install

Then open src/_variables.css and change the following variables:

The Portworx orange as the primary color and blue as the accent color

Before:

$color-primary: $palette-indigo-500 !default;
$color-primary-dark: $palette-indigo-700 !default;
$color-accent: $palette-pink-A200 !default;

After:

$color-primary: "241,90,36" !default;
$color-primary-dark: "216,65,11" !default;
$color-accent: $palette-blue-A200 !default;

Make the drawer wide:

Before:

$layout-drawer-narrow: 240px !default;
$layout-drawer-wide: 456px !default;
$layout-drawer-width: $layout-drawer-narrow !default;

After:

$layout-drawer-narrow: 240px !default;
$layout-drawer-wide: 456px !default;
$layout-drawer-width: 280px !default;

Then we rebuild the CSS (ignore the error about babel not registering):

./node_modules/.bin/gulp

Finally - we copy the resulting CSS build into our project:

cp dist/material.min.css ../px-docs-spike/static/css/material.min.css