Surveying the landscape of CSS micro-frameworks

March 13, 2023

Pretty soon after learning CSS and building my first few websites without table layouts (yes I’m old) I stumbled across the world of CSS frameworks. The oldest one I can remember using was the 960 Grid System. I guess calling it a framework is a stretch. It’s just a grid really. But at the time it was a breath of fresh air. I was trying to learn about design and grid systems and the 960 grid was so easy to use.

Then at some point Boostrap took over the world. A number of comprehensive frontend frameworks were born—CSS (probably Sass) and JavaScript included. And nowadays we have JavaScript libraries that people build frontend frameworks around, complete with fully-functional components—building blocks for making websites and web apps of any sort.

But with that kind of power comes complexity, bloat, performance issues, and dependency hell. So when beginning a new project, I like start by thinking about the bare minimum needed to get going. It’s also an excuse to waste time scouring the web for goodies as I am wont to do.

I’ve done everything from building with Vuetify to exclusively using my own CSS. But lately I’ve been enjoying the world of CSS micro-frameworks and classless CSS themes.

What is a CSS micro-framework?

I don’t know.^[1] So I’m defining it myself:

• May include classes for building grids, components, etc. Typically limited, though, because of the next rule.
• Under 10kb minified and gzipped. I feel like you can’t claim “micro” or “lightweight” beyond 10kb.
• JavaScript is optional and is not supplied by the framework.

Under this definition, classless CSS themes also count as micro-frameworks, but I prefer to think of them separately because they have different goals. More on those later.

Here are a few of the micro-frameworks I could find. I’ve used Spectre, Chota, and Pure recently, but haven’t used the others. I’d like to try Pico in the future.

• Pico: https://picocss.com/
• Spectre: https://picturepan2.github.io/spectre
• Milligram: https://milligram.io
• Skeleton: http://getskeleton.com/
• Picnic: https://picnicss.com/
• Pure: https://purecss.io/

One thing I’ve noticed is that many of these appear to be somewhat dated, past their prime of peak activity. If I were to speculate, I’d say it’s because CSS is very good now and if you aren’t using one of the big players in the CSS framework space, you might just be writing your own styles. That’s just a guess, though.

Personally I would like to see a lot more of these. And I was a little bit surprised to see that the same half dozen frameworks kept popping up everywhere (which is a problem I suppose I’m contributing to now).

Why use a CSS micro-framework over a regular one like Bootstrap?

There could be many reasons, but here are reasons I’ve used them:

• I would go for a micro-framework if I want to skip having a build step. They are usually easy to pull in and get started with.
• I want to reduce complexity. I want fewer options and less documentation to have to wade through.
• Performance. If it is a small project, maybe I can’t justify the larger sizes of other frameworks.

Just for fun, here is a size comparison of CSS micro-frameworks versus two larger ones, Bootstrap and Bulma. I came up with these numbers by starting with the minified version of each one and gzip-ing them from the command line.

But what if you could go even more micro than micro-frameworks? Enter classless CSS themes.

What are classless CSS themes?

They are kind of like micro-frameworks except that they don’t provide classes for styling. Instead they aim to make regular semantic HTML look and work nicely by default. This typically means adding a max-width to the body (or <main> tag), implementing some good typography, and styling most or all of the default HTML elements.

Classless CSS themes differ from other CSS frameworks because they aren’t generally meant as a jumping off point for a full blown design. Frameworks are meant to be used to build something—a particular layout or multiple templates for a larger website. Classless CSS themes, while happy to be extended, represent something closer to the end result. These themes aren’t generally made to build multiple templates or layouts of a website. They often begin and end with a centered column of content, and that’s all they ever intend to be.

This is why I like to call them “themes” rather than “frameworks.” Because they aren’t really made for building so much as they are made for viewing.

Here are a few I have collected recently. I’ve used awsm, Water, and Holiday but I would like to try the others out soon.

• Pico: https://picocss.com/ (they have a classless version)
• Simple.css https://simplecss.org/
• Water.css https://watercss.kognise.dev/
• awsm.css https://igoradamenko.github.io/awsm.css/
• holiday.css https://holidaycss.js.org/usage/
• GDCSS https://gdcss.netlify.app/
• Neat https://neat.joeldare.com/
• Typesafe https://tdarb.org/typesafe-css/

I want to call out two of these. Water.css made waves (heh) on Hacker News a few years ago and introduced me to the concept of classless themes. It’s still one of my favorites.

GDCSS is modeled after GOV.UK, which I admire for putting simplicity and accessibility front and center. US government (especially local) could learn a thing or two from the UK here (although this looks like progress).

Some of these and more can be found at CSS Bed and this huge list of classless themes on GitHub.

I love these classless CSS themes and it is hard to say why exactly

The biggest appeal is that they are drop-in, meaning it doesn’t take any special coding or design thought to make it happen (other than including it). Just create some HTML and include the stylesheet and you are done. You have a styled webpage.

I remember the first time I stumbled across this concept. It was in the mid-2000s when I found the W3C Core Styles. These were meant to be (I believe) drop-in CSS styles that you could use immediately with mostly no addition of classes or anything else. This idea intrigued me.

In the years following my discovery of the Core Styles, the idea of reusable themes would be hammered into my psyche in the form of WordPress themes. And once I dove into WordPress, the idea of publishing my own theme became a years-long white whale that I never did capture.

Fast-forward to the present. I no longer find myself deep in WordPress work. My website still does use WordPress (as of the time of this writing), but I no longer think of WordPress themes as the dominant way to make a webpage (even if it still is).

I’m now thinking in terms of static sites made with generators like 11ty. So “theme” means something different to me now. A good CSS theme should not presuppose too much boilerplate, so as to be easier to apply to different sites with different markup.

That brings us back to the W3C Core Styles. We want some good default styles that don’t assume you are using any particular markup scheme beyond regular, semantic HTML. You can if you want, but you will need to add custom styles as needed.

The W3C Core Styles are a bit dated and they don’t style many of the newer elements that came with HTML5.

That’s where modern, classless CSS themes come in. They add just enough styling over the top of browser defaults to provide a fantastic base look without the need for specialized markup. There’s just something satisfying about the idea that I can write some HTML and then grab a nice pre-made theme that Just Works™. It’s hard to describe why I like this so much. In a way I suppose it’s nostalgic—these themes take me back to a time when I had first discovered HTML and CSS and learned to make simple webpages by hand (as opposed to using a site builder).

It gives me warm fuzzies to get back to the “bare metal” of the web. It’s the digital equivalent of cleaning your desk and having only the essential items at your fingertips. These classless themes feel fresh and exciting despite their minimalistic nature. They make content look great, which makes me want to write more content. We should be excited about writing content. It’s never been easier or cheaper or to write and publish to a worldwide audience.^[2]

The framework-less framework

As we go deeper down the path of minimal CSS starters we end up at the logical conclusion—you might not need a framework at all. CSS has come a long way over the past decade. Many frameworks aren’t taking advantage of the cool stuff CSS can do now (eg, container queries, new sizing units, etc.).

Things that used to be difficult are much easier now. If all you need is a sidebar and a main content area, look no further than:

 1.with-sidebar {
 2  display: flex;
 3  flex-wrap: wrap;
 4  gap: 1rem;
 5}
 6 
 7.sidebar {
 8  /* ↓ The width when the sidebar _is_ a sidebar */
 9  flex-basis: 20rem;
10  flex-grow: 1;
11}
12 
13.not-sidebar {
14  /* ↓ Grow from nothing */
15  flex-basis: 0;
16  flex-grow: 999;
17  /* ↓ Wrap when the elements are of equal width */
18  min-inline-size: 50%;
19}
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sidebar {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 50%;
}

Source: Every Layout

The takeaway

Less code is desirable and, for content on the web, simpler design is often better than complex design.^[3] Micro-frameworks and classless themes are great for getting up and running quickly without adding file size bloat, build steps, or reams of documentation to peruse. Classless CSS themes in particular look great by default and make for a handy go-to when you just need some HTML to be presentable.