My six favorite utility classes

My approach to writing CSS these days lays somewhere in between Andy Bell’s CUBE CSS and Harry Roberts’ ITCSS. I prefer Andy’s definition of a utility class from the CUBE CSS docs:

A utility, in the context of CUBE CSS, is a CSS class that does one job and does that one job well.

I’m writing this post to keep track of all of my favorite utilities–things I find myself reusing in almost every project.

Visually Hidden

.vis-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0; 
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

If you ever used Bootstrap, you may recognize this as the sr-only class—in which sr stands for screen reader. I learned something from Melanie Richards’ recent learning log and am using the vis-hidden class name from now on:

This content is visually hidden; screen readers are not the only assistive tech that can access the hidden text on behalf of the user.

Uppercase Text

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
}

When you want something displayed in all capital letters, but you need assistive technology to read it predictably. Adding in a little bit of letter spacing makes it a little easier to read a word set in all caps.

Circular Images

.img-circle {
    border-radius: 50%;
}

This is great, whether you need a circular image for a user’s avatar or in an “art-directed” post.

Flex Objects

.flexo {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5em;
  }
  
  .flexo > * {
    flex: 1 0 18em;
    margin: 0.75em;
  }

A G-rated version of Heydon Pickering’s “Fukol Grid“. Turns anything nested in a div with a class of flexo into a flexible object (View demo).

Unstyled List

.list-unstyled {
    list-style: none;
    padding: 0;
  }

Another one you may recognize from Bootstrap. Sometimes you may need to remove the bullets in an unordered list or (less common) the numbers in an ordered list.

Multicolumn List

.list-multi-col{
    column-width: 12em;
    column-gap: 2em;
}

Helpful for displaying long lists of short words or terms. Think of a donor wall at a museum for a real-life example. I’ve used this pattern on advocacy.tennessee.edu and data.tennessee.edu.

In fact, I’ve found these so useful, all six of these utilities (plus a few more) have made their way into the nicksimson.com codebase.