Web

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.

Installation

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.

Winner: Bulma

Grid

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:

Bulma’s “Transparent Navbar”

This is definitely an improvement over Bootstrap’s plain and static take on this element:

Bootstrap’s Black navbar

But this is where the positives for Bulma stop. Bulma does NOT offer any JavaScript functionality to make their components work. In this day and age, I would’ve expected a few lines of JavaScript to compete with Bootstrap. Most people using Bulma are designers, and most of the time are not very fluent with JavaScript, at least in my experience.

Winner: Bootstrap, because of their JavaScript which adds functionality to elements.

Utilities

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.

Winner: Bootstrap

Conclusion

I’ve built numerous sites with each framework and I’ve come to a conclusion.

If you are just a designer or a front-end developer with no back end knowledge, Bulma is the right framework for you to use. Their design, simply put, looks much better than Bootstrap’s, but alas they do not offer any JavaScript to make their brilliant design work.

Bootstrap fills that gap, by offering their JavaScript CDN to add easy and lightweight functionality to their components. You trade that however for a more… plain design.

It wouldn’t be fair to choose an overall winner between two frameworks meant for a different audience, the developer and the designer.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.