Utilities

Utilities allow CSS programmers to write consistent, reusable code that's versatile, reusable and flexible. They're small CSS classes that can be used reused across the site, and tweaked where necessary.

A wrapper is a great example. Quite often, we need to contain a site at a max-width so content is readable, and we have a nice padding on smaller devices that isn't at max-width size. Taking our wrapper example, imagine if we needed variations of our wrapper, we could do the following:

.wrapper--short {
  --wrapper-max-width: 40rem;
}

This means we're not duplicating the other lines of CSS, keeping our code neat, reusable but the key thing here is also allowing it to be flexible!

Take a look at other utilities baked into Blyth.