CSS classes & custom properties for Material shadows and opacities
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.browserslistrc
.editorconfig
.eslintrc
.gitignore
LICENSE
README.md
build.js
package.json
screenshot.png
yarn.lock

README.md

Material Utilities

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

npm npm gzip size size

SCSS snippet featuring Material Utilities

If you're looking for the Material color palette, head over to shuhei/material-colors.

Inspired by colors.

Install

$ npm install material-utilities

Tip: 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 a PostCSS plugins that features CSS Custom Properties and @import. I recommand cssnext.

SCSS

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);
}

CSS

Just add the following link in your html

<link rel="stylesheet" href="https://unpkg.com/material-utilities@0.8.2/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>

Contribute

  1. Fork this repository to your own GitHub account and then clone it to your local device.
  2. Install dependencies using npm npm install or Yarn: yarn install.
  3. Make the necessary changes.
  4. Send a pull request.

License

MIT © Maxime Le Conte des Floris