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 shuhei/material-colors.
Inspired by colors.
$ npm install material-utilities
Tip: use the --production
flag to only install the "dependencies" (so without the "devDependencies").
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 a PostCSS plugins that features CSS Custom Properties and @import
. I recommand cssnext.
Import the module
@import "~material-utilities/dist/classes.scss";
@import "~material-utilities/dist/variables.scss";
Use the SCSS variable matching the shadow/opacity you want
.card {
box-shadow: var(--shadow-1);
}
.divider {
color: var(--dark-opacity-1);
}
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 class matching the shadow/opacity you want
<button class="shadow-1 shadow-transition shadow-5-hover">Download</button>