Introducing automattic.css – An open source CSS Utility Framework

Today I’m releasing v0.1.0 of automattic.css – a new utility-first CSS framework inspired by the structure and philosophy of Automatic.css, but with a twist: it’s lean, builder-agnostic, and open to the community from day one.

Why I Built It

I’ve worked with CSS frameworks long enough to know what bloats fast.

And automattic.css starts intentionally light – focusing on scalable, semantic utility classes built on CSS variables and fluid spacing systems.

It’s not trying to be Tailwind. It’s not locked into WordPress builders. It’s meant to be yours to extend.

Plus, a bit of backstory

Let’s just say this project didn’t start in a vacuum.

After a lively debate on what makes a $5,000 website, I ended up blocked by Kevin Geary, the creator of another CSS framework.

Then he pulled our entire episode and pretended it never happened by changing Episode 14 to 13 🤦‍♂️

Cool 🫠

So I read his docs. Then I built my own framework.

That’s how automattic.css was born – not (totally) out of spite, but out of principle.

I wanted something open, flexible, and community-first.

No gatekeeping, builder lock-in or paywalls.

Sometimes the best ideas start with: “Alright, bet.”

What’s in v0.1.0

Right now, automattic.css includes:

• A full spacing scale (.p-xxs to .p-xxl, margin, gap, section--*)
• Core typography utilities (.text--xl, .text--700, .text--center)
• Basic color classes for backgrounds and text (.bg--primary, .text--neutral)
• Grid utilities (.grid--3, .gap-md)
• Z-index utilities, focus states, and display helpers
• A small set of responsive overrides

It’s built entirely with CSS variables so you can theme and scale everything with confidence.

What’s Missing (and Coming)

This is a v0.1.0 on purpose. The framework doesn’t yet include:

• Contextual spacing utilities (.container-gap, .content-gap)
• Smart spacing (default margin resets + consistent vertical rhythm)
• Section spacing scale (section--sm, section--xl, etc.)
• Full color shade system (light, dark, hover)
• Transparency utilities (--primary-trans-40, etc.)
• Button variants (.btn--primary-dark-outline, etc.)
• Context-aware overrides
• Smart line height or fluid typography by default

These are already outlined and in-progress for the next release cycles.

Please note, I’m only one man with a limited amount of time spent on this so far, so if you don’t feel like it has enough for a v0.1.0 release, sue me 😎

Proving It Works: The Demo Template

To show automattic.css wasn’t thrown together without and testing, I built a live demo template using nothing but the framework itself – no builder, no bloated theme, no extra dependencies.

The goal? Prove that you can spin up a clean, responsive, fast-loading site with purely semantic utility classes and CSS variables.

The demo covers common layout patterns: hero sections, grids, and consistent spacing.

Everything is styled using the core classes from v0.1.0.

It’s the kind of template you can fork, gut, and make your own in five minutes.

Because frameworks shouldn’t just talk about being lean and flexible.

They should show it.

Why Launch Now?

Because the goal isn’t to ship perfection – it’s to build something useful and open.

I want feedback from real users before locking down every class, naming convention, or design constraint.

If you’re a dev or designer who values clean markup, semantic class names, and CSS variables over rigid systems, I’d love your thoughts.

You can use automattic.css today. You can fork it. You can help shape what v0.2.0 becomes.

Roadmap

Here’s what’s coming next:

• ✅ Full contextual spacing support
• ✅ Smart spacing system to remove default margins and enforce layout consistency
• ✅ Fluid, responsive typography with smart line height
• ✅ Scalable button system with token-based overrides
• ✅ Color shades, transparencies, and theme logic

Follow the repo, submit ideas, or just drop in and let me know how you’re using it.

Get Started

You can check out the GitHub repo here

Documentation is minimal right now, but I’m working on it as I hammer out the next updates.

CSS is organized, un-minified, and easy to customize.

Thanks for reading – and thanks in advance to anyone who uses, breaks, or improves this little framework.

Let’s build something better, together 💪💯