Introduction

I’ve been a major fan of Bulma ever since discovering it through the weekend project of developer Hassan Djirdeh (@djirdehh), https://www.cryptovue.com. On top of introducing me to the Bulma CSS framework which I instantly fell in love with, it also introduced me to VueJS, a JavaScript framework which, like Bulma, is capturing the attention of developers quicker and quicker each day. It’s been at least five months since I had first discovered Bulma, and in that time it’s already become my favorite CSS Framework and goto tool for Front-end Web Development. It’s replaced Bootstrap, Foundation, and Semantic UI within the span of months; a task which I wouldn’t consider easy by any means.

Bulma is written entirely using CSS alone, meaning that the developers are reliant on their own code alone if they want to introduce functionality such as a hamburger menu toggle it’s CSS class; an opinion that I highly am a fan of, since it reduces the bloat that I was often uncomfortable with when it came to Bootstrap or Foundation. On Top of that, Bulma is written using flexbox instead of traditional CSS grid mechanics, making it much more accessible and extendable where needed. If you hadn’t heard of the framework or played with it, I highly recommend seeing the documentation and comparing it to your favorite framework: bulma.io.

I often browse the issues and pull requests of projects which interest me for that time, and when an issue caught my attention as a topic which I highly needed, or wished for as well, I’d jump in offering to help in anyway possible. This behavior resulted in a week long discussion with Jim Blue, a contributor who had raised the the bug which caught my attention; the result being the solution which would follow the bulma culture best. is-small, and is-large css classes were created for the hamburger button, allowing for the developer to intentionally double or halve the hamburger button while styling the navigation bar to their requirements.

This small contribution perhaps means little to most developers, but I found the fix to be quite useful since in my own projects, I’ve had two instances (so far) where I had to override the defaults of the hamburger button to follow a new desired width / height, this in consequence requiring the spans having to be adjusted to accommodate the ratio as well. The addition of these classes make it much more accessible, and provide non-intrusive options for when the defaults don’t fit your criteria.

During this process, I learned over the week-long discussions and idea-throwing just how easily it is to misinterpret user experience expectations, even when written in the simplest of terms. The concepts from either side being misunderstood resulted in three seperate ideas and implementations, all for a simple CSS bug. That’s amazing! It’s amazing when I reflect on this, thinking of how much bigger projects with developers all over the globe get only conventions, concepts and rich-text to convey such delicate ideas effectively. The world of Open Source is amazing like this, where barriers which separate communities are simply ideas conveyed through language and language alone.