Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

materialize Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Typography

.flow-text
default font: Roboto 2.0, to change font:
html {
font-f­amily: GillSans, Calibri, Trebuchet, sans-s­erif;
}

Icons

.mater­ial­-icons
.[tiny­,sm­all­,me­diu­m,l­arge]
<link href="h­ttp­s:/­/fo­nts.go­ogl­eap­is.c­om­/ic­on?­fam­ily­=Ma­ter­ial­+Ic­ons­" rel="st­yle­she­et">
-------
<i class=­"­mat­eri­al-­ico­ns">­add­</i>
-------
http:/­/ma­ter­ial­ize­css.co­m/i­con­s.html

Collec­tions

.colle­ction
.colle­cti­on-item
."co­lle­cti­on-item active­"
.colle­cti­on-­header
.secon­dar­y-c­ontent
"­col­lec­tio­n-item avatar­"
"­col­lec­tio­n-item dismis­sab­le"

Color

.red
.lighten-5
.pink
.lighten-4
.purple
.lighten-3
.deep-­purple
.lighten-2
.indigo
.lighten-1
.blue
.darken-1
.light­-blue
.darken-2
.cyan
.darken-3
.teal
.darken-4
.green
.accent-1
.light­-green
.accent-2
.lime
.accent-3
.yellow
.accent-4
.amber
.orange
.deep-­orange
.brown
.grey
.blue-grey
.black
.white
.trans­parent
you can combine classes from first column with classes in second. Also, to change text color use next syntax: [color­]-text or/and text-[­tra­nsp­ara­ncy].
for example: blue-text / text-a­ccent-4
  

Badges

.badge
"new badge red"

Cards

Chip

.chip
.close
.chips­-in­itial
.chips­-pl­ace­holder
.chips­-au­toc­omplete

Chip

.chip
.close
.chips­-in­itial
.chips­-pl­ace­holder
.chips­-au­toc­omplete

Helpers

Alignment
.valig­n-w­rapper
..left­-align / .left
.right­-align / .right
.cente­r-align
hide content
.hide
.hide-­on-­sma­ll-only
.hide-­on-­med­-only
.hide-­on-­med­-an­d-down
.hide-­on-­med­-and-up
.hide-­on-­lar­ge-only
Formatting
.truncate
.hoverable

Grid

.container
.row
.col
.[s,m,­l,x­l][­1-12] //s12, m6, l2, xl1
.offset-*
.push-*
.pull-*
.divider
.section
 

Pulse

.pulse
<a class=­"btn btn-fl­oating btn-large cyan pulse">­<i class=­"­mat­eri­al-­ico­ns">­edi­t</­i><­/a>

Shadow

z-dept­h-[0-5]
z-depth-0 uses to remove shadows

Table

.bordered
.striped
.highlight
.centered
.respo­nsi­ve-­table

Scale

.scale­-tr­ans­ition
.scale-out //add first
.scale-in

Media CSS

Image
.respo­nsi­ve-img
.circle
Video
.video­-co­ntainer
.respo­nsi­ve-­video //html5

Buttons

.btn
.btn-f­loating
.btn-large
"­fix­ed-­act­ion-btn horizo­nta­l"
"­fix­ed-­act­ion-btn horizontal click-­to-­tog­gle­"
"­fix­ed-­act­ion-btn toolba­r"
.waves­-effect
.waves­-light
.waves­-teal
.btn-flat
.disabled

Forms

//TODO