1 Hour with Bulma CSS Framework

Today I checked out Bulma, a CSS framework based on Flexbox to build web app faster. It doesn’t come with any JavaScript dependencies, which I consider a plus, because I want to use Vue.js and don’t need jQuery.

To sum it up in one sentence: It looks promising, but isn’t quite there for my particular use case. It has a few rough edges here and there.

The idea that HTML elements by itself don’t add any styling and everything is styled through CSS classes is new to me. It makes the HTML code quite verbose. Not sure whether or not I like it, but it’s different.

A. Font is too light

Apple’s system font San Francisco is set to light (font-wight: 300) and I find it almost unreadable on my non-retina MacBook Air. This can be fixed easily though by overriding the respective variable $weight-light: 400.

B. The docs are somewhat incomplete

  • Installation was easy, but I couldn’t find an actual example page. Do you have to use .container within a section or the other way around? When do you use the level component? When the grid? I understand there’s a learning curve to such a complex framework, but the docs didn’t really help to figure things out.
  • Overriding variables in the suggested way results in Sass errors, because the variable name $orange is not set.

C. Inline forms a bit clunky

Inline forms with labels on the left side (not above) input fields is what I need. The only way to achieve this is with a grid layout. Nothing wrong with that, because it’s the same in Bootstrap, but I actually had a hard time to get this to work. There are too many modifiers with unclear results so that I gave up after a while (has-addons, is-expanded, field vs. control, where does a control-label go, etc.)

I tried to implement the same form in Bootstrap and got better results much faster. I found Bootstrap’s classes less confusing.

Will try again

The best way to evaluate a CSS framework is to start with the requirements that are non-negotiable for the project. It’s easy to (mis)judge a framework by the pretty things and I really do like many components in Bulma.

I might consider Bulma again in the future for another project that is less heavy on form and input control usage than my current project. Until then, I can imagine that more full-page examples would help a lot, such as templates for a blog, shop, marketing page, a signup form, an admin area.