CSS Helper Classes

Michael BourneUpdated:

Tags:

X Theme comes with dozens of preset CSS classes that are sure to speed up your development. Have a look through to see how they work.

Spacing

Spacing helpers are for setting the margin and padding of various elements. Much faster than using your own custom CSS, excpet for large values.
The helpers are all three letter acronyms, each letter represents a specific item. For example, a commonly used class is man (margin all none).

1. The first letter specifies whether you’re setting the margin or padding
2. The second letter specifies the location of the margin or padding
3. The third letter specifies the size of the spacing, relative to the body font size of the element (defaults to body font size set in the customizer).

The structure is set as follows:

1st Letter2nd Letter3rd Letter
m - margina - all (top, bottom, left right)
n - none
p - paddingt - top
s - small (0.5em)
r - right
m - medium (1em)
b - bottom
l - large (2em)
l - left
h - left and right
v - top and bottom

Positioning and Display

Spacing helpers are for setting the margin and padding of various elements. Much faster than using your own custom CSS, excpet for large values.
The helpers are all three letter acronyms, each letter represents a specific item. For example, a commonly used class is man (margin all none). You can see them in action in this Landing Page tutorial written for Cornerstone.

1. The first letter specifies whether you’re setting the margin or padding
2. The second letter specifies the location of the margin or padding
3. The third letter specifies the size of the spacing, relative to the body font size of the element (defaults to body font size set in the customizer).

The structure is set as follows:

ClassEffect
leftFloats the item to the left.
.left {
float: left;
}
rightFloats the item to the right.
.right {
float: right;
}
center-blockCenters block level elements.
.center-block {
margin-left: auto;
margin-right: auto
}
center-listCenters table display elements (like this!)
.center-list {
display: table;
margin-left: auto;
margin-right: auto
}
hideHides the object.
.hide {
display: none;
}
showShows the object.
.show {
display: block;
}
invisibleHides the element visually, but maintains it's position.
.invisible {
visibility: hidden;
}
visually-hiddenHides the element from sight without removing it from screen readers or spiders.
.visually-hidden,
.screen-reader-text,
.screen-reader-response,
.bp-screen-reader-text {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0)
}
transparentMakes the object completely transparent.
.transparent {
opacity: 0;
}
opaqueMakes the item fully opaque.
.opaque {
opacity: 1;
}

Font Weight

Font weight classes are great for adding quick and easy variation toy our website’s text. Important to note that not all fonts have all the variations.

ClassWeight
w-100Thin
w-200Extra Light
w-300Light
w-400Regular
w-500Medium
w-600Semi-Bold
w-700Bold
w-800Extra-Bold
w-900Heavy

Hide based on screen size

Sometime you will need to hide elements from specific screen sizes. And although some elements have built in “Hide based on screen size” options, not all do. That’s where these classes come in handy.

ClassEffectResolutions
x-hide-xlHides on extra-large displays1200px and up
x-hide-lgHides on large displays980px – 1199px
x-hide-mdHides on medium displays768px – 979px
x-hide-smHides on small displays481px – 767px
x-hide-xsHides on extra-small displays480px and smaller

Have a question or a comment about this article? Click here!
About the Author

Michael Bourne

Facebook

Hey, I'm Michael, and I've been making websites since the mid 90s! These days I focus on Wordpress and would call myself quite handy in PHP, JS, and CSS. Outside of coding and web design, I'm quite fond of craft beer and backpacking around the world.

Share this Tip!