Blog: CSS

Bulma: road-testing the CSS framework

Published

CSS

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.

Blog

View all
PHP

2020: refreshing the life of a long term developer

2020 has been incredibly refreshing. Let’s also be blunt, it’s been completely shit for so many too – including isolation from family and months of Stage...

Continue reading...

Game

Astro's Playroom

Astro’s Playroom. It’s free, and comes pre-installed on your PS5. It is basically a tech demo wrapped up in a platformer. And a pretty fun platformer too. And...

Continue reading...

PHP

Creating a TinyMCE addon for Statamic 3

It’s no secret: I do love TinyMCE. It provides an excellent authoring experience, that produces clean and reliable HTML, and can easily be customised and extended...

Continue reading...

Life

Installing and review of the Sonos Wall Mount with the Sonos One SL

I’m new to the Sonos ecosystem, and after setting up the Sonos Arc and Sub combination, I wanted more, so splurged on a pair of One SL speakers for surrounds....

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