CSS Helper Classes

Below I’ve listed some helper classes I find useful in most of the projects I work on. Although not all of them will be applicable to every site, a lot of them are handy just to have in your CSS arsenal for when you don’t need to create a new class but need a quick fix for something.

Note: You’ll notice some class definitions are written in one line, whereas other are written with returns. This is perfectly fine to do and something I’ve found keeps the code a bit cleaner and more organised, especially on large projects, but it’s more up to you and your team how you actually structure your CSS.

/* General */
.img-full {
    width: 100%;
    display: block;
}

body.lock-scroll {
    overflow: hidden;
}

/* Spacing */
.spacing-large        { padding-top: 100px; padding-bottom: 100px; }
.spacing-large-top    { padding-top: 100px; }
.spacing-large-bottom { padding-bottom: 100px; }

.spacing-medium        { padding-top: 60px; padding-bottom: 60px; }
.spacing-medium-top    { padding-top: 60px; }
.spacing-medium-bottom { padding-bottom: 60px; }

.spacing-small        { padding-top: 30px; padding-bottom: 30px; }
.spacing-small-top    { padding-top: 30px; }
.spacing-small-bottom { padding-bottom: 30px; }

/* Typography */
.txt-large { font-size: 1.25rem; }

.txt-left   { text-align: left; }
.txt-center { text-align: center; }
.txt-right  { text-align: right; }