FRAMEWORK , CSS

Classless CSS Frameworks

Sep 09, 2024 2 minute read Ben Hoskins

What are Classless CSS Frameworks?

Classless CSS or Semantic HTML website frameworks are becoming quite useful for quickly building websites. They’re simpler to work with than the traditional alternatives like Bootstrap and Tailwind.

So-much-so that complicated website templates based on utility type CSS frameworks may become a thing of the past.

These sorts of frameworks are focused at website developers or engineers rather than website designers.

Semantic design engineering, rather than designing as a craft itself.

Dedicated Web Designers may have a more specific sense of what they want, and what works well for their use-case, where as devs tend to appreciate modern design based on good standards without fussing too much other the specifics.

i.e. Instead of using a complicated utility driven CSS/HTML frameworks. You can use a CSS framework that works with raw HTML tags, at the expense of a little design flexibility.

[!INFO] Website Template Sidenote Although you might now be able to achieve similarly beautiful results with modern Classless CSS frameworks…

Here’s a couple of my favorite traditional utility based templates catalogues HTML5 Up, Pixelarity and maybe even Creative Tim.

A “Classless” CSS or semantic HTML framework is simpler than traditional utility based frameworks like Bootstrap or Tailwind which leverage descriptive classes on HTML elements.

These traditional frameworks are helpful for creating sites easier than coding without any at all. They standardise common design styles, and provide a utilitarian shorthand for them, but they also complicate the DOM’s HTML markup with many utility type classes like <div class="row col-12 align-left hero text-bold font-black">content etc. Simpler markup but just as nice visually with the same ease of use. e.g. <article><h1>content.

This significantly adds up across a project and affects the time needed for the initial build and subsequent maintenance also.

Developing with Classless CSS feels more like the early days of the web, but with modern design sensibilities.

Perhaps we have circled back around to a simpler markup due to the use of pre-processors and development workflows that fragment and fracture markup across the code-base for development and deployment convenience.

Writing a complex tower of classes (unique a particular framework) for each element in the DOM is a small thing for a singular flat-file, but it’s something else entirely when that stack of styles is spread across a project, to be compiled later down the line.

Some “Classless” CSS frameworks actually do offer a few helper classes for specific common use cases where standard HTML markup may not be intrinsically descriptive enough.

Pico CSS

https://picocss.com/

Jekyll example: https://github.com/Misterio77/pico-jekyll
has network defined configuration like full-classless and colours.
progressive adoption possible with .pico

Pico seem like a full and beautiful experience for creating simple and modern sites. Especially in terms of spacious “marketing pages” rather than almost-Windows XP style boxes and modals.

You can have a nice looking site with as little as:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>

Sakura CSS

https://oxal.org/projects/sakura/

Although a much smaller project that perhaps covers less of what might be needed in a full site. It’s a nice framework and seems targeted at content like post and blogs.

MVP CSS

https://andybrewer.github.io/mvp/

Although a nice frameowrk and seems almost a full features as Pico, it didn’t play well on a classless CSS demo site. This suggests the HTML may need customisation in the markup to achieve the same effects as other frameworks.

Honorable Mentions

While these may not technically class as classless frameworks, I thought they’d still be worth sharing.

Oinam Jekyll

https://oinam.github.io/oinam-jekyll/styleguide/

Nice but specifically Jekyll and not super popular.

Old skool

https://github.com/riggraz/no-style-please

Almost unrelated but I’m drawn to it!

[!NOTE] Classless Blog I may update this site to use a classless framework at some point, but not just yet. I like the design at the moment and so it would only be a labour of love to swap the framework.