Precisely CSS
Background Classes
These can be added to any Section Class field, Column Class field, or to any individual element.
bg-purple
bg-yellow
bg-gray-light
bg-purple-dark
bg-orange
bg-white
bg-pink
bg-blue
bg-binary
bg-gray
bg-black
bg-binary-row
Spacing Classes
These can be added to any Section Class field, Column Class field, or to any individual element.
Padding
- Add padding in increments of 1rem, from 1-5rems
- Add to all sides at once or specific sides
- Remove padding by using 0
Example classes:
p3 = padding: 3rem
pt2 = padding-top: 2rem
pr5 = padding-right: 5rem
p0 = padding: 0rem
pb0 = padding-bottom: 0rem
Margin
- Add margin in increments of 1rem, from 1-5rems
- Add to all sides at once or specific sides
- Remove margin by using 0
Example classes:
m3 = margin: 3rem
mt2 = margin-top: 2rem
mr5 = margin-right: 5rem
m0 = margin: 0rem
mb0 = margin-bottom: 0rem
Row Spacing
- Add to Section Class field on any row
- Adds 5rems of padding to top and bottom of row
- Gives breathing room in between sections
Class:
rowPadding
Text Classes
These can be added to any text element (p, h1, h2, span, etc.)
Color
txt-purple
txt-purple-dark
txt-pink
txt-gray
txt-yellow
txt-orange
txt-blue
txt-black
txt-white
Alignment
center
left
right
Weight
bold
demi
light
Miscellaneous
caps
Capitalizes all letters
imgCaption
Styles captions below images
h3
Use on h3 tags to standardize size, weight and spacing
Miscellaneous
Width & Height
- Adjust in increments of 5%, from 50-100%
Example classes:
w55 = width: 55%
w75 = width: 75%
w100 = width: 100%
h55 = height: 55%
h75 = height: 75%
h100 = height: 100%
Display
hide
Completely hides an element
md-hide
Hides an element on screens smaller than 768px (tablets)
sm-hide
Hides an element on screens smaller than 600px (mobile)
Tabs
tabs-dark
Place in Section Class field when using Tabs on a dark row background
New Shortcodes
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo purus in justo pellentesque, hendrerit varius ipsum pretium.”
Author
Author Role