Cheatsheet

Body classes (modes)

.boxed Gives the page a boxed layout. As seen in the preview. Use this class on the body only.
.dark Turns the page into a white-on-black one. Use this class on the html element only

Helper classes

.vcenter Centers content. Can be used on ".row" elements.
.text-center Centers the text horizontally.
.pull-left Floats an element to the left (Bootstrap)
.pull-right Floats an element to the right (Bootstrap)
.hide-mobile Hides element on mobile
.hide-tablet Hides element on tablet
.m-[0,xs,sm,md,lg,xl] Sets margins of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.mt-[0,xs,sm,md,lg,xl] Sets margin-top of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.mb-[0,xs,sm,md,lg,xl] Sets margin-bottom of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.mr-[0,xs,sm,md,lg,xl] Sets margin-right of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.ml-[0,xs,sm,md,lg,xl] Sets margin-left of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.p-[0,xs,sm,md,lg,xl] Sets padding of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.pt-[0,xs,sm,md,lg,xl] Sets padding-top of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.
.pb-[0,xs,sm,md,lg,xl] Sets padding-bottom of an element to a specific value. -0 = 0, -xs = 5px, -sm = 10px and so on.

Icon classes

.fa .fa-* Use this on every FontAwesome icon class. Also see: FontAwesome Cheatsheet
.ion-* Use this on every Ion icon class. Read more about Ionicons