This is a draft cheat sheet. It is a work in progress and is not finished yet.
Color
red pink purple |
deep-purple indigo blue |
light-blue cyan teal |
green light-green lim |
yellow amber orange |
deep-orange brown grey |
blue-gray black white |
transparent |
lighten-[1-4] |
darken-[1-4] |
accent-[1-4] |
JS
Carousel |
|
Collapsible |
|
Dialogs |
|
Dropdown |
|
FeatureDiscovery |
|
Media |
|
Modals |
|
Parallax |
|
etc |
Icons
<i class="material-icons">add</i> |
<i class="large material-icons">insert_chart</i> |
tiny small medium large |
Sass
_variables.scss |
animation($args) |
animation-delay($delay) |
animation-direction($direction) |
animation-duration($duration) |
animation-fill-mode($mode) |
animation-iteration-count($count) |
animation-name($name) |
... |
Cards
card |
card-content |
card-title |
card-action |
card-image |
halfway-fab |
"card horizontal" |
card-stacked |
card-reveal |
sticky-action |
card-tabs |
"tabs tabs-fixed-width" |
tab |
"card small" |
... |
|
|
Grid
container |
row |
col |
[s,m,l,xl][1-12] // s12, m6, l3 |
offset-* |
push-* |
pull-* //pull-s4 |
section |
divider |
Navbar
nav-wrapper |
side-nav |
brand-logo |
active |
nav-extended |
nav-content |
tabs |
tabs-transparent |
tab |
navbar-fixed |
dropdown-content |
dropdown-button |
side-nav |
Table
bordered |
striped |
highlight |
centered |
responsive-table |
Media
responsive-img |
video-container |
circle |
responsive-video |
|
|
Buttons
btn |
btn-floating |
btn-large |
fixed-action-btn |
horizontal |
click-to-toggle |
toolbar |
btn-flat |
disabled |
Transitions
scale-transition |
scale-out |
scale-out |
Collections
collection |
collection-item |
active |
collection-header |
with-header |
avatar |
secondary-content |
dismissable |
Pagination
pagination |
disabled |
active |
Helpers
valign-wrapper |
[left,right,center]-align |
left |
right |
hide |
hide-on-small-only |
hide-on-med-only |
hide-on-med-and-down |
hide-on-med-and-up |
hide-on-large-only |
truncate |
hoverable |
|
