CSS Framework Evolution

A long time ago I wanted to build a website and I did using nothing but my own code for the interface and logic behind the scenes. This site was absolutely garbage from a design perspective and was quickly abandoned after it became obvious that any change would break 15 other things. The site had no support for any screen size except for the one it was built on, so I went on the hunt for a mobile friendly CSS framework.

A few months later I started another site and used jQuery Mobile to help build out the mobile design. I wanted to spend less time building the boilerplate and just working on the project itself. Unfortunately, this site did not have anything worth designing for as it was meant for mobile viewing.

It was also such a weird site that an entirely different experience was delivered for mobile vs desktop. Nowadays you'll find frameworks that are responsive friendly for all types of screen sizes.

Ten years ago jQuery was all the rage and this design pattern was common to see. However, the next project I started I wanted to use a different CSS framework and thus stumbled upon Semantic UI.

This framework had quite a plain method to build a button, which looked like.

<button class="ui button">
  Follow
</button>

So I found myself building Panda Love and LeafApp and a few other private projects all in Semantic. As years went on I ran into some problems here and there with the project and it was seemingly becoming abandoned. So I started following this community fork known as "Fomantic UI", but I felt there had to be a newer alternative.

However, I couldn't fight ignoring Bootstrap any longer and produced a few sites privately that leveraged it. I felt it was overused so I initially stayed away from it. A Bootstrap button also leveraged pretty much the same markup, but with the common prefix shorthand that most engineers have memorized now.

<button class="btn btn-default" type="submit">
    Follow
</button>

As Bootstrap evolved I followed a few major upgrades, but found another framework that took my focus as Bootstrap 4 was released.

I started building a project in Foundation and that was a quickly ended journey. The framework seemed extremely professional and organized supporting tons of great features like accessibility, but the design looked so bland I felt like it wasn't a good fit. I struggled so much trying to build something that felt good to me and fought the framework so often.

The button example though rivaled others in terms of how you could get something going with near zero code. A simple class of "button" laid down the foundation for everything you needed.

<button class="button">
    Follow
</button>

However, Foundation and I weren't meant to be. So I went hunting for a different framework and stumbled upon Bulma.

This project felt like Semantic UI, but with active development and a great set of documentation to learn from. I built Leaf and Halo Depot and a few other private projects with Bulma.

The basic button HTML matched that of Foundation.

<button class="button">
    Follow
</button>

This gave you a good chance of collisions if any other framework used the common names, but I found if I started a new project and only used Bulma and refused to include 3rd party extensions - things worked well.

As 5~ years went by - it seemed Bulma only had a few releases and was also aging. The world had moved towards CSS variables which looked like such a great enhancement to more easily leverage "dark mode".

This blog at the time of this writing uses CSS variables heavily in order for the light/dark toggle to swap the theme in one quick movement. That is my only large complaint with Bulma at the moment  - that I don't have an easy way to support a dark/light theme.

So once again I went looking - this time landing on Tailwind CSS.

I haven't actually completed a project myself using Tailwind and I'm not exactly positive why yet. It could be the large shift to a utility based framework or that I get confused whether to use @apply or make custom components.

Either way - this latest framework might not be my choice in a few years like has been shown prior, but it looks exciting either way to try a new one out.