Honey Butter

HB CSS Layout Utility

Posted by Honey Butter on May 10, 2026

Avoid Rewriting the Same CSS Over and Over – A Simple Layout Utility System

Categories

Avoid Rewriting the Same CSS Over and Over – A Simple Layout Utility System

If you’ve been building WordPress sites for a while, you’ve probably felt this pain: you open a new theme or template file, and before you’ve written a single line of real content styles, you’re already typing display: flex and gap: 2rem for the fifteenth time this year. Maybe in a custom block, maybe in a template part, maybe in the Additional CSS panel in Gutenberg. It doesn’t matter – it’s the same handful of declarations, over and over again.

That’s what pushed me to build HB Layout Utilities.

What Is It?

It’s a single CSS file – no npm, no build process, no dependencies – that gives you a collection of utility classes for the three layout systems you probably reach for most often:

  • CSS Grid
  • Flexbox
  • Spacing (margin and padding)

Instead of writing CSS declarations from scratch each time, you just add a class to your HTML. Gutenberg’s block editor lets you add custom classes to almost any block through the “Advanced” panel, so this fits right in without any plugins or custom code.

The Problem It Solves

Here’s a real example. Say you want a simple two-column layout in a Gutenberg template. You might end up with something like this scattered across your stylesheet:

.my-two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.my-hero-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.my-features {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

You’re not really saying anything new – you’re just rewriting the same rules with different names. Over time your CSS grows, gets harder to maintain, and you end up with subtle inconsistencies (why is this gap 1.5rem and that one 2rem?).

With utility classes, those same layouts become:

<!-- A two-column grid -->
<div class="hb-grid hb-grid--2">…</div>

<!-- A flex row with centered items -->
<div class="hb-flex hb-flex__align--center hb-flex__gap--2">…</div>

Your CSS file stays lean. Your spacing is consistent. And when you’re working in a block template, you can apply these directly in the Gutenberg block settings without touching a stylesheet at all.

How It Works

Everything is built around a small set of base classes with modifiers you combine together.

Grid — Start with .hb-grid, then add a column count:

<div class="hb-grid hb-grid--3 hb-grid__gap--2">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

That gives you a three-column grid with a 2rem gap. No extra CSS required.

Flexbox — Start with .hb-flex, then layer on what you need:

<div class="hb-flex hb-flex__wrap hb-flex__justify--between hb-flex__align--center">
  …
</div>

Spacing — All spacing classes follow a consistent pattern: hb-{prefix}--{size}. The prefixes use CSS logical properties (which means they work correctly in right-to-left languages too, as a bonus):

<!-- padding-block-start: 3rem, margin-inline: auto (centered) -->
<div class="hb-pbs--3 hb-mi--auto">…</div>

The size scale runs from 0 to 10 (in rem), with half-steps available (0-5 = 0.5rem, 1-5 = 1.5rem, etc.).

Responsive out of the box — At 768px and below, grid and flex containers automatically collapse to a single-column stack. If you don’t want that, there are override classes (.hb-grid--keep-mobile, .hb-flex--keep-mobile) to keep them intact on small screens.

Make It Yours – Just Rename the Prefix

I like to namespace everything I build with hb- (short for Honey Butter, the studio I work under). It keeps my utility classes from colliding with anything else in a theme or plugin.

If you want to use this on your own projects, I’d encourage you to do the same – just do a find-and-replace on the CSS file and swap hb- for your own prefix. If your studio is called Maple Creative, change it to mc-. If it’s just for personal projects, use your initials. Takes about ten seconds and suddenly it feels like yours.

Getting Started in WordPress

  1. Download hb-layout-utilities.css (or your renamed version of it)
  2. Enqueue it in your theme’s functions.php:
function my_theme_enqueue_styles() {
  wp_enqueue_style(
    'hb-layout-utilities',
    get_template_directory_uri() . '/css/hb-layout-utilities.css'
  );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
  1. In the block editor, select any block, open the Settings sidebar, scroll to Advanced, and add your classes in the “Additional CSS class(es)” field.

That’s it. No page builders, no extra plugins, no JavaScript — just CSS classes working the way CSS has always worked.