A comprehensive review of the Bulma CSS framework
Bulma advertises itself as an open source CSS framework based on Flexbox and used by more than 100,000 developers, but I wanted to put it head to head with Bootstrap to see just what kind of value this new platform can offer.
The first step with using any CSS framework is installing it, and I must say I was surprised. As most web designers know, installing Bootstrap consists of downloading plain CSS files or linking with their CDN, and does not offer much customization of the guts. Bulma has taken a new approach.
Bulma recommends using their SASS instead of just importing a CSS stylesheet, and they’re absolutely right. Customizing any part of Bulma only takes a line of code, and you can mix and match which components you want to be imported, unlike Bootstrap where you get the whole package by default.
Bootstrap is widely renowned for its outstanding and popular grid system, but once again Bulma has taken a new approach. When using Bootstrap’s grid system, we see that we need a few different classes and elements to make it work properly.
Bootstrap’s columns are a fixed width of the screen, based on the viewport width. Here is Bulma’s approach:
As you can see, we did not specify a specific size that each column must fit. Bulma’s grid system is more fluid, and columns simply take up as much space as they need to without any unnecessary white space.
Winner: Slight edge to Bulma
Elements & Components
When you look at the Bootstrap documentation, you will see they offer 21 different components to play with. These are your standard elements that are a pain to style with. You have your navbar, forms, and lists. Normal things.
Bulma is not as simple, they offer a few different categories of building blocks you can use; layouts, forms, elements, and components. Not including all the different form inputs, we get a grand total of 23 unique components.
Looking at the quality of the components, there are some differences. For example, take the navbar. Bulma’s looks pretty good, here’s a screenshot:
This is definitely an improvement over Bootstrap’s plain and static take on this element:
Little shorthand classes to add, let’s say, a margin to a block quote on your page, are super handy to use if you don’t want to individually style that element.
Bulma offers simple ones like float, inline/block displaying, color helpers, etc.
But Bootstrap takes the cake when it comes to utilities. They offer clearfix, colors, display, embed, float, responsive media, easy vertical alignment, and many more.
I’ve built numerous sites with each framework and I’ve come to a conclusion.
It wouldn’t be fair to choose an overall winner between two frameworks meant for a different audience, the developer and the designer.