Fork me on GitHub

Snack-Helper

Colors

transparent
white
black
Color Gray
gray-lightest
gray-lighter
gray-light
gray
gray-dark
gray-darker
gray-darkest
Color Brown
brown-lightest
brown-lighter
brown-light
brown
brown-dark
brown-darker
brown-darkest
Color Red
red-lightest
red-lighter
red-light
red
red-dark
red-darker
red-darkest
Color Orange
orange-lightest
orange-lighter
orange-light
orange
orange-dark
orange-darker
orange-darkest
Color Yellow
yellow-lightest
yellow-lighter
yellow-light
yellow
yellow-dark
yellow-darker
yellow-darkest
Color Green
green-lightest
green-lighter
green-light
green
green-dark
green-darker
green-darkest
Color Teal
teal-lightest
teal-lighter
teal-light
teal
teal-dark
teal-darker
teal-darkest
Color Blue
blue-lightest
blue-lighter
blue-light
blue
blue-dark
blue-darker
blue-darkest
Color Indigo
indigo-lightest
indigo-lighter
indigo-light
indigo
indigo-dark
indigo-darker
indigo-darkest
Color Purple
purple-lightest
purple-lighter
purple-light
purple
purple-dark
purple-darker
purple-darkest
Color Pink
pink-lightest
pink-lighter
pink-light
pink
pink-dark
pink-darker
pink-darkest

Spacing

Padding

padding
.p-0
.p-4
.p-8
.p-12
.p-16
.p-24
.p-32
.p-48
padding-top
.p-t-0
.p-t-4
.p-t-8
.p-t-12
.p-t-16
.p-t-24
.p-t-32
.p-t-48
padding-bottom
.p-b-0
.p-b-4
.p-b-8
.p-b-12
.p-b-16
.p-b-24
.p-b-32
.p-b-48
padding-left
.p-l-0
.p-l-4
.p-l-8
.p-l-12
.p-l-16
.p-l-24
.p-l-32
.p-l-48
padding-right
.p-r-0
.p-r-4
.p-r-8
.p-r-12
.p-r-16
.p-r-24
.p-r-32
.p-r-48

Margin

margin
.m-0
.m-4
.m-8
.m-12
.m-16
.m-24
.m-32
.m-48
margin-top
.m-t-0
.m-t-4 .m-t--4
.m-t-8 .m-t--8
.m-t-12 .m-t--12
.m-t-16 .m-t--16
.m-t-24 .m-t--24
.m-t-32 .m-t--32
.m-t-48 .m-t--48
margin-bottom
.m-b-0
.m-b-4 .m-b--4
.m-b-8 .m-b--8
.m-b-12 .m-b--12
.m-b-16 .m-b--16
.m-b-24 .m-b--24
.m-b-32 .m-b--32
.m-b-48 .m-b--48
margin-left
.m-l-0
.m-l-4 .m-l--4
.m-l-8 .m-l--8
.m-l-12 .m-l--12
.m-l-16 .m-l--16
.m-l-24 .m-l--24
.m-l-32 .m-l--32
.m-l-48 .m-l--48
margin-right
.m-r-0
.m-r-4 .m-r--4
.m-r-8 .m-r--8
.m-r-12 .m-r--12
.m-r-16 .m-r--16
.m-r-24 .m-r--24
.m-r-32 .m-r--32
.m-r-48 .m-r--48

Sizing

height (%)
.h-0
.h-20
.h-25
.h-40
.h-50
.h-60
.h-75
.h-80
.h-full
.h-auto
width (%)
.w-0
.w-20
.w-25
.w-40
.w-50
.w-60
.w-75
.w-80
.w-full
.w-auto

Border

border
.b-0
.b-1
.b-2
.b-4
.b-8
border-top
.b-t-0
.b-t-1
.b-t-2
.b-t-4
.b-t-8
border-bottom
.b-b-0
.b-b-1
.b-b-2
.b-b-4
.b-b-8
border-left
.b-l-0
.b-l-1
.b-l-2
.b-l-4
.b-l-8
border-right
.b-r-0
.b-r-1
.b-r-2
.b-r-4
.b-r-8

Rounded

border-radius
.r-0
.r-4
.r-8
.r-12
.r-16
.r-full
border-top-left-radius
.r-t-l-0
.r-t-l-4
.r-t-l-8
.r-t-l-12
.r-t-l-16
.r-t-l-full
border-top-right-radius
.r-t-r-0
.r-t-r-4
.r-t-r-8
.r-t-r-12
.r-t-r-16
.r-t-r-full
border-bottom-right-radius
.r-b-r-0
.r-b-r-4
.r-b-r-8
.r-b-r-12
.r-b-r-16
.r-b-r-full
border-bottom-left-radius
.r-b-l-0
.r-b-l-4
.r-b-l-8
.r-b-l-12
.r-b-l-16
.r-b-l-full

Shadow

box-shadow
.shadow-none
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5

Text

font-size
.f-s-0
.f-s-10
.f-s-12
.f-s-14
.f-s-16
.f-s-18
.f-s-20
.f-s-24
.f-s-32
font-weight
.f-w-100
.f-w-200
.f-w-300
.f-w-400
.f-w-500
.f-w-600
.f-w-700
.f-w-800
.f-w-900
text-align
.text-left
.text-center
.text-right

Alignment

vertical-align
.align-top
.align-middle
.align-bottom

Display

display
.d-block
.d-inline-block
.d-inline
.d-flex
.d-inline-flex
.d-none

Position

position
.static
.fixed
.absolute
.relative
.sticky

Flexbox

flex-direction
.flex-row
.flex-row-reverse
.flex-col
.flex-col-reverse
flex-wrap
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
justify-content
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
align-items
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
align-self
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
align-content
.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch