Why I love Bulma

I’ve never been good at styling things. This website might be some evidence of that! 😁 But styling a website isn’t just about picking color schemes: fonts, spacing, icons, etc… There’s a lot to consider when all I really want to do is create a few pages that look decent.

I’ve tried Bootstrap before, which has been a staple of the internet for many years, and Tailwind has gained significant traction over the last few years, but my go-to library for my CSS needs has been Bulma.

I think I discovered Bulma through Twitter. I think someone tweeted about it, and the more I looked into it the more interested I became. Hopefully just talking about some of the things I like about Bulma might spark more interest in it!

Components/Elements

Bulma has many components built into it that are very easy to setup, and are well documented! One big selling point that Bulma pushes is that it’s all in one CSS file. In the big world of programming, you can always take a bunch of different CSS files, and minify them into one file. The selling point here is mainly to emphasize that Bulma comes with no javascript bundle.

90% of the time, this isn’t a problem: all of the components Bulma has to offer work without any javascript. There is one exception to this rule though, which you can find in the documentation here.

TL;DR: navbar elements require some javascript to get them to appropriately collapse in mobile. The example they have on their site has a pretty extensive javascript that’ll handle multiple navbars. I’m usually only creating one as part of my layout, so I just slap some IDs on the elements I care about:

<a id="burger" onClick={toggleStyles} role="button" 
  class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navbarmenu">
  <!-- other elements here -->
</div>

Toggling whether or not to make the menu visible becomes trivial using a few selectors and an onClick event bound to that burger:

/*
* Added this to toggle the is-active class. See:
* 
* https://bulma.io/documentation/components/navbar/#navbar-menu
* https://github.com/jgthms/bulma/issues/856
*/
const toggleStyles = () => {
  document.querySelector('#burger').classList.toggle('is-active')
  document.querySelector('#navbarmenu').classList.toggle('is-active')
}

One other quick tip: Microsoft Edge has issues with how Bulma has implemented navbars, but this can be fixed with CSS. Multiple work-arounds can be found here depending on your use-case.

Customization

Bulma is very variable-oriented. Pretty much everything that has a default in Bulma can be customized. Colors, responsive breakpoints, fonts, you name it, anything can be customized!

This comes in handy when you have a site that has a very particular color scheme. It’s possible to customize the colors and sizes of a lot of elements just by setting a variable.

You can check out the full list of variables here. I’m one of those individuals who tries not to put CSS in too many places. As a stylistic preference, I’m not normally a fan of sytles within HTML or JSX. I’ll normally write one Sass file, and overwrite Bulma’s variables as needed, and that way it gets applied throughout the whole site:

$primary: #c01045
@import '~bulma/scss/bulma.scss'

That color I chose was as close as I could get to spelling out “colors” in hexidecimal format, but in this example, we’re changing the $primary color of Bulma. Bulma has a variety of colors that are available by default, and they can be used for a variety of purposes, including denoting success or indicating something that the user should give some attention to. Other colors like $danger and $warning can be customized to help apply the same color across multiple components.

Responsiveness

Bulma is responsive right out of the box. There are a number of breakpoints that Bulma comes packaged with, and they can be used in conjunction with styles to ensure that elements are displaying only when they’re supposed to be.

Here is where an entire list of classes can be found that can help with displaying/hiding elements based on sceensize. For example, the following element displays differently based on screensize:

<div class="is-hidden-touch has-background-black has-text-white">You're on a larger device!</div>
<div class="is-hidden-desktop has-background-black has-text-white">You're on a smaller device!</div>

Depending on your use-case, this could be a very nifty trick up your Bulma sleeve.

Conclusion

I hope that I’ve sparked a little bit of interest in Bulma with this post. If you’ve got any feedback for me, I’d love to hear back from you! Links to my social media platforms can be found at the bottom of this page!