Why I love Bulma

#css #scss

I’ve never been good at styling things. My new blog 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 eventbound 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 onyour 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 styles 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 sceen size. For example, the following element displays differently based on screen size:

Please see the example on my blog here. This blog post was sourced from my blog and the embedded source won't work here :)

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