Must reconsider

by Andy Prevost

Friday April 12 2024

All modern CSS Frameworks claim to be mobile first. Bootstrap does. Bulma does. Most others do as well.

All CSS Frameworks need Javascript (as in plain vanilla javascript only, JQuery, or others). It can't be done without Javascript of some sort. The simple proof of that is the navigation. Without a trigger for a menu, mobile websites would end up as scrolling events to find and get by the menu links. It's just not that simple to build a one page website all the time. Can't imagine even a simple blog without some sort of menu system for categories and articles. A simple ecommerce site acting as an electronic "flyer" might be able to get away with no menus. As website and web app developers, we need Javascript.

Bulma makes that difficult. There are a number of Javascript libraries that have popped up to support the Bulma Framework. Some are complete, some incomplete. Bootstrap has their own and is included with their download.

With either CSS Framework, you will need to include the CSS and the JS files with each page you deliver to a browser request.

We'll go straight to comparing file sizes, strictly in minified versions of their respective packages. I can't imagine any sane developer using the raw (unminified, or uncompressed) version at all. Just in CSS alone, the raw Bulma v1.0.0 is over 700Kb and the raw Bootstrap v5.3.3 is at 275Kb. Be practical, these are mobile first frameworks, use the minified versions.

In the minisifed versions, Bulma CSS v1.0.0 is 633Kb and Bootstrap v5.3.3 is 228Kb. Of course, you also have to add in Javascript. Bulma offer no Javascript with their package. Bootstrap v5.3.3 Javascript is 60Kb. I won't make any assumptions on the Bulma javascript file sizes ...

But ... I do note that the entire Bootstrap v5.3.3 package combining CSS and Javascript is less than 300Kb minified. That's less than half the size of Bulma CSS alone.

If you read my pages, I have been an avid user of Bulma CSS. In part, it's because I admire the underdog ... and Bulma is still without any doubt the underdog when it comes to CSS frameworks. My articles on the short comings of Bulma clearly show a frustration with some of the dumb opinions. One of my first fixes was to create a typography.css and restore the default values to many of the display elements of HTML. P, UL, OL, H1 to H6 ... are just some examples. They work fine in Bootstrap, but in Bulma you have to juggle some extra classes just to get basic expected functionality.

In that frustration, I've even considered rolling my own. Ya, I know, a dumb idea. I've even gone down the path of creating my own components and elements to replace Bulma CSS classes. When you reach this point, it's time to re-evaluate using that CSS Framework. Quite frankly, I'm near the point of giving up on Bulma – like so many others have. Many have switched to Bootstrap and Tailwind while others have switched to website generators.

Me? I'm likely to go to Bootstrap. It's refined. Opinions are well explained with over-rides offered. I can eliminate most of my fixes (typography, spacing, color modifiers). Including file sizes is reasonable. And, it's popular. As of April 2024, the market share estimates are:

  1. Bootstrap with over 78% market share
  2. Tailwind with less than 1% market share (0.6%)
  3. Bulma with less than 1% market share (0.2%)

The market share numbers surprised me. Some of the packages mentioned in the market share report surprise me even more. You just can't ignore the popularity, wide base of support, and available resources that using Bootstrap opens up. The chart at the top right of this article shows the market share numbers ... and it's really interesting that the display chart to support that spreadsheet doesn't even display any framework with less than 1% market share. That leaves only Bootstrap, Animate, and Foundation on the chart. (and, I don't believe Animate is a full CSS framework - although I could be wrong).

And, it's a big plus that any "fixes" needed to remediate Bootstrap short comings will still come in less in file sizes and really make a difference in mobile first development.

One other aspect to consider (and it doesn't apply to me, though): adding a popular CSS Framework like Bootstrap to your resume can help you get more work, more contracts, and a lot more exposure. Don't ignore that. Why doesn't this apply to me? I only take on small projects these days. I closed down my business many years ago and am pretty much retired.

 

◀ Previous Next ▶

Post a Comment