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.
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 different. 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 that 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.
Discover more from WorldOWeb
Subscribe to get the latest posts sent to your email.