# # MaterializeCSS Cheatsheet

### Grid
Class | Description | Possible Values
--- | --- | ---
`row` | Create a row |
`col` | Create a column |
`offset-*` | offset|  `s*` `m*` `l*` `xl*`
`s*` | Small screen column size | `1 to 12`
`m*` | Small screen column size | `1 to 12`
`l*` | Small screen column size | `1 to 12`
`xl*` | Small screen column size | `1 to 12`
`container` | Container |
`divider` | Divider |

### Positioning
Class | Description | Possible Values
--- | --- | ---
`*-align` | Align Text | `left`  `right` `center`
`*` | Float Item | `left` `right`
`clearfix` | Clearfix Float |
`hide` | Hide |

### Colors

Class | Description | Possible Values
--- | --- | ---
`*` | BackGround Color | `teal` `red` `...`
`lighten-*` | Lighten BackGround Color | `1` `2` `3` `4` `5`
`darken-*` | Lighten BackGround Color | `1` `2` `3` `4`
`accent-*` | Accent BackGround Color | `1` `2` `3` `4`
`*-text` | Text Color |  `teal` `red` `...`
`text-lighten-*` | Lighten Text Color | `1` `2` `3` `4` `5`
`text-darken-*` | Darken Text Color | `1` `2` `3` `4`
`text-accent-*` | Accent Text Color | `1` `2` `3` `4`

### Text
Class | Description | Possible Values
--- | --- | ---
`truncate`| Truncate Text |
`flow-text` | Responsive Text |

### Images
Class | Description | Possible Values
--- | --- | ---
`responsive-img` | Responsive Image |

### Misc
Class | Description | Possible Values
--- | --- | ---
`z-depth-*` | Shadow | `1` `2` `3` `4` `5`
`hoverable`| hoverable content |