I did more research on file sizes of two of the CSS frameworks – largely because I did not believe the reviews of others. My other motivation is that I am working on some new websites that are mobile first designs. I had concerns about the file sizes of CSS frameworks as they relate to desktops, but hadn't really thought much about the impact on mobile ... and that is where the most concern is.
Methodology
I downloaded all of the files from a CDN source, the same as "joe average" would. I stored the files on my hard drive and measured to the byte. In one case, the un-minified version was not available, so I "un-minified" the .min version.
Results
And, a preamble here. You can't use Boostrap without its javascript library. My final results show the package with javascript.
Bulma claims to be javascript agnostic, so I need to point out the Bulma results are WITHOUT javascript. I know it is not an apples-to-apples comparison ... if it were, Bulma would look even worse than it does in my results.
Bootstrap (v5.3.3) was a bit of a surprise. Other reviewers claimed the minified version was 150Kb ... here's the actual results. Bootstrap WITHOUT javascript is 283Kb raw and 234Kb minified. With javascript: 430Kb raw, 295Kb minified.
All Bulma results are without javascript.
Bulma version 0.9.4: 246Kb raw, 209Kb minified.
Bulma version 1.0.0: 734Kb raw, 651Kb minified.
Bulma Version 1.0.0 with no dark theme (and Helpers added in): 583Kb raw, 543Kb minified.
I need to point out that the forums are building up with complaints about the Bulma Version 1.0.0 file size, about the No-Dark-Theme version lacking the Helpers and the problems the overall file size will create with mobile users paying for data on their cell phones.
My thoughts on this
I've already made the decision to stick with Bulma version 0.9.4. The latest effort (Bulma version 1.0.0) reminds me of that joke: Put lipstick on a pig, and you still have a pig. Version 1.0.0 is a pig, you can use the "no-dark-theme" and add the v1.0.0 Helpers ... and you still have a pig.
I will measure everything using Bulma v0.9.4 (minified) as my "standard" ...
Bootstrap v5.3.3 minified is 1.4x larger size.
Bulma v1.0.0 minified is 3.1x larger size.
Bulma v1.0.0 (no-dark-theme + Helpers) minified is 2.6x larger size.
And thoughts on dark-light mode
I notice as I get older that eye sight fades. I set my Windows 11 desktop to 125% automatic zoom. I've switched my CSS to default to 16px as equal to 1rem (up from the 14px I had prior). And I find myself pouring over color combinations that create higher contrast. I've already adjusted Bulma v0.9.4 in my "fixes" to change the text and heading colors from #383838 to #000000 (pure black).
Dark-Light mode is intriguing. I had previously tried the CSS code "invert(1)" and "invert(.85)". The invert code had un-intended consequences though and I stopped using it – actually, I should say never implemented it.
When Bulma v1.0.0 was released, one of the major features touted on the website is this Dark-Light mode. After doing my file size calculations, it would appear that the "no-dark-mode" at 358Kb less than the full version means that the "dark-light" mode takes Bulma CSS coders 358Kb to implement. Now that's one f***ng leap. To go from one line of CSS code (invert) that's a bit wonky to 358Kb of code ... wow!
I decided to spend more time on this issue and see what it really takes to come up with an effective dark-light mode implementation. I started a few days ago with some site examples that I had already designed and built. Most are really highlight different headers, footers (a few with maps), and some forms.
This also helped me refine my fixes and how my own components are designed. One major change: I stopped adding background colors and foreground colors to my components. This is one aspect of Bulma (v0.9.4) that I like (in a way)... it helps force building HTML and CSS with minimal customization. That's not to say Bulma got it right.
Bulma v0.9.4 defines ".is-info" in multiple places. It's a great way to implement a color scheme ... and I used the concept to create themes.
I use the standard Bulma colors.
For example, I have defined .theme-is-info with the same background-color and foreground color as .button.is-info, plus I have added some unique elements for a custom hr center piece background (so that it matches the is-info background-color. I've also added support for hyperlinks by theme color.
And, I have added a few of my own theme colors (ie, .theme-is-orange, .theme-is-white, .theme-is-black).
I am nearing implementation point. I have two "theme" css files and one javascript file. The two CSS files are a whopping 11Kb, and the JS file is 5Kb (both raw).