Responsive Breakpoints Shorthand

xs = extra-small
xm = small
md = medium
lg = large
xl = extra-large

Mobile first - All reponsive breakpoints represent how something will display from that breakpoint and above

Spacing Shorthand

Property:
m = margin
p = padding

Location:
t = top
r = right
b = bottom
l = left
h = horizontal (left and right)
v = vertical (top and bottom)

Spacing utilities use numbers 0-15, each a multiple of 8

For example:
pb-4 = padding-bottom: 32px;
mv-2 = margin-top: 16px; margin-bottom: 16px;
p-3-md = padding: 24px; //on medium sized screens and above


Display Shorthand

d = display
o = opacity

Examples:
d-none = display: none;
d-block-lg = display: block; //on large sized screens and above
o-08 = opacity: 0.8;


Color Shorthand

bg = background

Background Colors
.bg-purple-gradient { background: linear-gradient(180deg, #C6178E 0%, #762B8A 78.12%); color: white; }
.bg-white { background-color: #FFFFFF !important; }
.bg-light-purple { background-color: #EADFEB !important; }
.bg-violet { background-color: #87189D !important; color: white; }
.bg-blush-pink { background-color: #F5EDF7 !important; }
.bg-barely-grey { background-color: #F2F2F5 !important; }
.bg-pale-grey { background-color: #E3E3EA !important; }
.bg-pale-blue { background-color: #DFE5F7 !important; }
×

👋 Hello, if you have any
questions, I'm ready to chat.

Chat Now