Material Utilities

A set of CSS custom variables & classes to bring Material shadows and opacities to your project.

If you're looking for the Material color palette, head over to https://github.com/shuhei/material-colors. Inspired by colors.

Install

$ npm install material-utilities

Reminder: use the --production flag to only install the "dependencies" (so without the "devDependencies").

Usage

PostCSS

Import the module

@import "~material-utilities/src/material-utilities.css";

Use the CSS custom property matching the shadow/opacity you want

.card{
  box-shadow: var(--shadow-1);
}
.divider{
  color: var(--dark-opacity-1);
}

Note: You'll need PostCSS plugins that features CSS Custom Properties and @import (like cssnext).

SCSS

Import the module

@import "~material-utilities/dist/classes.scss";
@import "~material-utilities/dist/variables.scss";

Use the CSS custom property matching the shadow/opacity you want

.card{
  box-shadow: var(--shadow-1);
}
.divider{
  color: var(--dark-opacity-1);
}

CSS

Just add the following link in your html

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-utilities.min.css">
<!-- If you use a build tool like Gulp to concatenate your stylesheets, you should use 
<link rel="stylesheet" href="path/to/module/material-utilities.min.css">
-->

Use the CSS custom property matching the shadow/opacity you want

<button class="shadow-1 shadow-transition shadow-5-hover">Download</button>

Development

Clone the repository on your machine

$ git clone https://github.com/mlcdf/material-utilities.git && cd material-utilities

Install local dependencies

$ npm install

You can start coding!

Running npm start will generate the minified and unminified CSS files as well as the SCSS files in the dist folder.

Contributing

Remarks, advices & contributions are welcome. Feel free to open an issue or submit a pull request.

License

MIT © Maxime Le Conte des Floris