- Clone the repository (or download it as zip and extract it)
- Remember the path to the
_material.scssfile (<path>/_material.scss) - Include the library:
- Using SASS from command line:
sass --compass -I <path> [your-other-args] - Within a compass project: Add the following line to your
config.rb:
add_import_path "<path>"
- Import the files to your scss/sass:
@import "material/design;"
(or only@import "material";if you just want to use the helpers (variables and mixins) without importing any declared css-rules)
For a light design add the class light to the <html> or <body>-element. For a dark design use the class dark
classes:
flatorraised(by default the raised styles are applied)color: The button is colored in the selected primary-color
Use the color HTML-Attribute to use another color for the button
<button class="flat" color="red">Click Me!</button>
<button class="raised" color="deepPurple">Hello World!</button>
classes:
full-widthSee here
classes:
floatingSee here
- Every color with every hue like
$<colorName>-<hue>
(e.g.$red-500or$deepPurple-A400) - Every color as map with the hues as keys and the colors as values
(e.g.map-get($red, 500)ormap-get($deepPurple, A400)) - The
$colors-map with the color names as keys and the color-maps as values (useful in@eachstatements) - More information here
$primary-<hue>and$accent-<hue>(defaults are indigo(primary) and pink(accent))
z-depth(n)sets the box-shadow to emulate the given z-depth. Valid values are 1 to 5 or 0 for no shadow
(e.g.@include z-depth(2);)
More information here