Mini CSS part 2

Date: 15 April, 2026
Category: code
Tags: CSS

I'm back and I'm still talking about mini CSS frameworks. I decided to make a pretty basic HTML page based off of the MDN "Structuring Documents" example and load in different CSS frameworks with zero customization.

The classless frameworks have an advantage here, since they don't have utility classes and templates to build from, but are intended for something as simple as this document. Still, I figured any of them should have a pretty decent shot at styling very basic HTML elements.

One funny thing I noticed is that many of the frameworks look basically identical in this use case, with a few color differences. I suspect this is because so many of them are built on top of normalize.css.

Screenshots

Here are a couple screenshots of some frameworks I found more noteworthy than others. If you'd like to repeat my experiment, the code I used is at the bottom. Just uncomment the frameworks you'd like to see!

This page is a mess, the vertical nav items and search bar are over the headers so it's not readable. — Picnic

Nice looking page, horizontal nav bar is a little awkward because of large search button and input. Headings and text black on light background. Article has border around it and white background. — PicoCSS

Horizontal blue nav links, search is in its own box which gives it an early 1990s kind of feel. Aside is in purple box, otherwise black text on white background. — mvp.css

Light grey elements on white background. Navbar vertical, full length search input with search button. Article has border around it. Font size is quite small. — SpryCSS

Page with vertical pink nav list, full width search bar with stylized pink button attached to input, footer has separate grey bar. The article is surrounded by an outline with shadow. — Sugar

simple html page with centered horizontal nav items and search bar below, readable text with generous margins, article with border, and aside that is floating over the article in an awkward way — Tacit

simple html page with rounded grey search button, all elements readable, white background with black text — Water CSS

And of course, if you can't make up your mind, you could turn them all on...

page with confusing layers of navigation, headers. The article looks quite nice, though. It is centered and has a border plus shadow and inside is a purple aside box. — Water CSS

My example

<html>
  <head>
    <title>Testing frameworks</title>
    <!-- bulma -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> -->

    <!-- chota -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/chota@latest"> -->

    <!-- mini.css -->
    <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css"> -->

    <!-- picnic -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic"> -->

    <!-- pico -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> -->

    <!-- pure -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous"> -->

    <!-- milligram (uncomment all of the below) -->
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> -->

    <!-- mvp.css -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/mvp.css">  -->

    <!-- sakura -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css"> -->

    <!-- simple.css -->
    <!-- <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> -->

    <!-- spectre -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css"> -->

    <!-- spry -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ggedde/spry-css@2.3.23/dist/spry.min.css"> -->

    <!-- sugar -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rezi/sugar-css@main/dist/sugar.min.css" /> -->

    <!-- tacit -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.9.5.min.css"/> -->

    <!-- tachyons -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/> -->

    <!-- water -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"> -->

    <!-- wing -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/wingcss"/> -->
  </head>

  <body>
    <header>
      <h1>H1 element in header</h1>
      <nav>
        <ul>
          <li><a href="#">Nav item</a></li>
          <li><a href="#">Nav item</a></li>
          <li><a href="#">Nav item</a></li>
        </ul>

        <form>
          <input type="search" name="search" placeholder="Search input" />
          <input type="submit" value="Search" />
        </form>
      </nav>
    </header>

    <main>
      <section>
        <h2>H2 element in a section</h2>
        <p>This is a paragraph tag of reasonable length. All went well on Starbase twelve. I think you'll find the ship to be in splendid condition. Power... weapons... communications. We're being stripped one system at a time... Their defenses apparently prevent deep strikes into each other's territory. Minor skirmishes are all that's left. Then... what if we re-connect their command pathways and give them a choice?</p>
      </section>

      <section>
        <h2>Another H2</h2>

        <article>
          <h3>H3 element in section > article</h3>
          <p>P tag it's complete, but I would like to request an addition. I hope I'm better than you realize, Ral. Maybe I'm just afraid of the big chair. You're the one who said it. And while we're at it... this isn't part of any human future...</p>
          <aside>
            <h4>H4 tag in aside</h4>
            <ol>
              <li>List item</li>
              <li>List item</li>
            </ol>
          </aside>
        </article>
      </section>
    </main>

    <footer>
      <p>Some footer content</p>
    </footer>
  </body>

</html>