Simple CSS ... SimpleCSS Framework

by Andy Prevost

Monday April 15 2024

I have posted nearly every day for the past few weeks, mainly with rants about bloated CSS Frameworks. The CSS Framework I have been using until recently is Bulma CSS Framework. As of 21 March 2024, it has the distinction of being the largest file size CSS Framework used via a CDN.

At 713Kb, it is like trying to push an elephant through a straw. You would think some consideration for the end user on a budget trying to view a few websites from a mobile device. Not all mobile plans are priced reasonably ... some areas and countries have mobile plans that are absolutely cost-prohibitive. Every byte counts.

I recently discovered SimpleCSS ... created by Kev Quick and available on Github (license: MIT). Drop by the site and read about it. The author makes a lot of sense. And as the author points out, you won't get the same functionality from SimpleCSS as you would from Bulma CSS. But, you get a slimmed down fully functional framework that is 10Kb. Compare that to Bulma CSS at 713Kb.

By the way, SImpleCSS includes a Navbar, Dark/Light mode support, great looking form elements and buttons, plus a lot more. It's own website is built with SimpleCSS and you can download the entire website with demo from Github. A fresh starting point.

CSS Frameworks like Bulma, Bootstrap and many others are gigantic. We use them because they are simple to use, help shorten development cycles. In the case of Bulma, one appealing feature was the class syntax ... it's intuitive. What we do not consider is that we only use a tiny portion of the CSS Framework features. Of course, the creates of these giant frameworks suggest we use SASS or some other pre-processor and only use what we want or need. If that is their recommendation, why make a CDN available?

That reminds me of a joke: How do you eat an elephant? ... One bite at a time.

So why not take these elephant size CSS Frameworks and make components (one bite at a time) available through CDN. Here's an example. Bulma includes classes for breadcrumbs and pagination. Ever use those features outside of a content management system or listing service? Joe Average that builds small to medium websites will rarely ever use those ... yet if he wants to use Bulma, he has to include that because it's in the CDN.

There is an alternative for Joe Average building a small to medium website: use SimpleCSS. Sure, you will have to add a few classes to get what you ultimately want. That is likely less code than the fixes you have to write to get work arounds to the Giant CSS Framework issues.

Here's a thought: why not grab a copy of SimpleCSS and add a flexbox based grid? SimpleCSS is MIT licensed – you can modify it to your heart's desire (read the license, as long as you don't claim the package as your own if you distribute it). You can also find any other MIT licensed package and use the flexbox grid from that. I found one that is syntactically nearly identical to Bulma's grid system ... the one I found is only 15Kb (raw, even less minified). Need to add a Hero section? I found one that is responsible and works with flexbox that is only 1Kb. Get the picture yet?

 

◀ Previous Next ▶

Post a Comment