Blog: CSS

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.


View all

Integrating Tiny with Vue in a real world application

TinyMCE 5 has made the setup process more straightforward - and even easier with the Cloud version. And as there are so many JS frameworks out there, Tiny have...

Continue reading...


Extending the ItemHelper for Joomla

There are times in Joomla where you want a bit of control over your content at the template override level – such as showing the first X characters of a string. PHP...

Continue reading...


How Tiny helps me deliver the best content authoring experience

At Joomla Day Australia 2019 in Brisbane, I spoke about how TinyMCE helps deliver the best content authoring experience. And for those who couldn’t make it on...

Continue reading...


How to show real-time highlights and shadows clipping in Photoshop

I’ve used Photoshop for years. Decades even. Yikes, showing age there. But for my photography, I tended to use Photoshop for specific things – such as cleaning...

Continue reading...

I am the Development Director (and co-owner) at Mity Digital, a Melbourne-based digital agency specialising in responsive web design, custom web development and graphic design.
Mity Digital