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; }


Web designer and developer from Southampton, UK.

Comments are closed for this post.


Inspirational Newsletter

Join the newsletter to get the best articles, tutorials and exclusive freebies every two weeks.

No spam. You can unsubscribe at any time.