Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Classless CSS Frameworks

CSS frameworks are a great way to quickly style a website. They provide you with a set of pre-built components that you can use to build your website. And they also provide you with a set of utility classes that you can use to style your components.

But, the problem with CSS frameworks is that they come with a lot of pre-built components that you might not need. And they also come with a lot of utility classes that you might not need. And that’s why they are not very lightweight.

And that’s where classless CSS frameworks come in.

What are classless CSS frameworks?

These are CSS frameworks that don’t come with any pre-built components. They rely upon the actual semantics of your HTML to style your website.

So, for instance, if you have a <h1> tag, it will be styled as a heading. And if you have a <p> tag, it will be styled as a paragraph. So, you can quickly prototype your website that still looks good and at the same time, you don’t have to worry about adding a single class to your HTML.

You just drop the CSS file in your project and bam! You have a nice-looking website instantly.

There are a couple of classless CSS frameworks out there.

Simple.css

A simple, lightweight, and classless CSS framework. It’s just 4KB gzipped. Even though it’s classless, it comes with the following set of features.

  • A good-looking sans-serif local font stack.
  • Typographic best practices.
  • Automagic flipping to dark mode.
  • Makes your website fully responsive.

Here’s a demo of what it looks like.

Simple.css

Pico.css

If you want your website slightly more modern-looking, Pico.css is the option you can use. It comes with some pre-built classes to style your grids and containers. Also, a few utilities for loading spinners and tooltips.

But it also comes with a classless version (like they say “For wild HTML purists!”) that you just drop in and forget about it.

Here’s a demo of what it looks like.

Pico.css

Like this article? Consider leaving a

Tip

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?