Skip to main content

Hello Bulma CSS Framework, Goodbye Bootstrap

0

During spring, I decided to give WOW a little overhaul and create a new WordPress theme. I previously used bootstrap 3, which at the time was very stable. During the development stage, I could upgrade to Bootstrap 4 or change to another framework.  Having looked at several options I opted to choose Bulma, a fast-growing lightweight CSS framework. Here are my findings.

CSS Code

Why Change?

I enjoyed using Bootstrap for 18 months and all though I enjoy developing with it I wanted to try something new to reduce the weight of every page load. In comparison, at the time of writing, the average page load is 3MB per website. As WordPress itself is quite intensive this is also important in the design of any theme, in particular when using plugins too.

My Options

As I didn’t really need all the bells and whistles of Bootstrap to run my blog I opted for Bulma, which, at the time was a fast-growing lightweight alternative to the ever-growing Bootstrap. Bulma didn’t need to load any additional JavaScript which is a bonus. To chop things down with either of the frameworks you can always compile your own custom version by removing anything you don’t need.

Bulma v’s Bootstrap Comparison

If you are coming bootstrap the learning curve isn’t too much difference. Bootstrap has a big community because it’s been around a long time.  Therefore, as a result, Bootstrap has an extensive range of tools, like themes and plugins available.  Both the latest version of Bulma and Bootstrap 4 work with the flexbox grid which most modern-day browsers support.  If you want to support older browsers like IE9 then the stable 3.3.7 version of bootstrap would be a suitable alternative.  Bulma comes with Font Awesome support out of the box whilst Bootstrap features better accessibility. Take a look at the comparison in more detail on the Bulma website.

Weight Bootstrap 4 Bootstrap 3 Bulma
Version 4.1.3 3.3.7 0.72
Normal CSS 179 KB 146 KB 203 KB
Normal JavaScript 212 KB 70 KB None **
Compressed CSS 145 KB 121 KB 170 KB
Compressed JavaScript 71 KB 37 KB None **
Total Compressed 216 KB 158 KB 170 KB
Other Requirements * Requires jQuery * Requires jQuery ** Optional JS for Navbar and Font Awesome

As you can see from the table above there isn’t much difference between the total amount of resources loaded. With Bootstrap you are loading more files, by making more HTTP requests, with a total weight of 216 KB. With Bulma, you are making 1 HTTP request totalling 170 KB. If you were to load jQuery on top of this would beef it up more. Bootstrap plays nicely with the slimmed version of jQuery so trims it a little further.

Using WordPress?

By far the most awkward part of developing WOW’s WP theme was the NavWalker to build the navigation.  I recently released a custom NavWalker that I pieced together that has Font Awesome Support.

Conclusion

Should you go with Bulma or Bootstrap? Good question. It depends on your needs. If you need the bells and whistles then Bootstrap is the way to go. On the other hand, Bulma is becoming increasingly popular with each update. It’s an easier learning curve has a growing community of users and extensions. Why not give it a go.

If you have switched from Bulma to Bootstrap or vice versa then please feel free to share your thoughts in the comment section below.

Topics:

%d bloggers like this: