Bulma: road-testing the CSS framework

I’ve been doing some research on CSS frameworks to determine their usefulness in my day to day work.

I think every developer has heard of Bootstrap. And thousands of developers use it. But I feel like I am being forced to do things a certain way, and I start to feel a little boxed in.

Then I came across Bulma, and it grabbed my interest – neat and clean layout (and flex-based) with a strong focus on mobile support. And with class names that just seem to flow and make sense.

I felt like Bulma wasn’t trying to force a particular “look” on me, and being CSS only meant that I could make it do things (aka JavaScript) whatever way I wanted. It provides responsive structural elements that I can then dress up to suit my layout.

I thought what better way to get stuck in to a framework than with a real-world project. So I gave my website (yep, this one) a face-lift with Bulma.

Some styles I have left untouched – but others overridden for my preferences.

From the source SASS files, I am able to include only the parts I need, and this has helped keep the overall CSS size down. But also I can declare my variables before including the Bulma SASS, and non-destructively override Bulma to work for my project. From breakpoints to font styles to colours, I can tinker to tweak the look and feel with minimal additional CSS.

The helper modifiers for padding and margin were so easy to work with – but it would be nice to have greater control of an element’s padding. “is-paddingless” removes the padding from an element – but what if I only want to remove it (or add it) to one side of an element? Helpers like that could become a useful addition – but does come down to that balance of feature bloat and compact code. Compactness is one of the features that peaked my interest in Bulma to begin with.

Layout with fluid and responsive columns just worked, and the navbar component made working with a floating and fixed header so easy. I felt like these components alone made it so easy and effortless to use.

Would I use a framework like Bulma for every site? Unsure – every framework, be that CSS or otherwise, has its time, place and use case. For a simple stock standard website, there is potential for a framework to have elements of overkill for my liking, but for a more interactive web application, the additional controls are handy to have in your toolkit. Ultimately would come partially down to the design. I can see how Bulma could be used on any website – but the question (as always) is whether it is necessary. I actually look forward to my next project to see whether it is a good fit for Bulma - I have enjoyed working with the ease of the framework.

I think I see Bulma as a collection of helpful helpers (yeah, that’s a thing… well, it is now anyway) that helps make me spend less type tweaking minor pixels of a layout and focus more on building the layout knowing that it works together nicely (including spacings). It has been a helpful nudge, but still let me do things my way.

The most enjoyable thing, out of the box, was that it just worked on mobiles. Define your structure and it just flows so nicely. Flex is awesome (and funnily enough, I haven’t used float or clear: both for a very long time now).

One of my upcoming tasks will be developing a reskin for an administrative tool – and Bulma (paired with VueJS) will be used for this. I think Bulma (and its array of components and elements) will really shine in a more interactive application than just a website.