My Impressions of the Bulma CSS Framework

In my last blog post, I said I was going to refactor my vadacl demo Angular application using the Bulma CSS framework.  I recently finished that task.  Here are some screenshots of the new look:

Having now used Bulma in a project, here are some of my thoughts and some of the things I learned:

• The ability to change core style settings using Sass variables is a convenient feature.  I was able to implement the color scheme for my app by simply changing three of the primary theme variables.  I also made two minor spacing and sizing adjustments.

  $primary: #694979;
  $info: #474e52;
  $danger: #d01e42;
  $gap: 16px;
  $help-size: 1.65ex;
  

• I like the clarity of the class names Bulma uses. "has-text-black" and "has-background-primary" are pretty self-explanatory and easy to remember.  The grid layout is implemented with a "columns" container and "column" blocks, with size modifiers like "is-2" or "is-half".

• Most CSS frameworks remove the natural top and bottom margins of the HTML <p> paragraph element, but Bulma also removes the style and margins of the header elements (<h1>, <h2>, etc.).  You can re-apply the expected styles by adding the "title" class and one of the "is-size-x" classes (where "x" is a number between 1 and 7).

• Related to the previous bullet, Bulma provides a "content" class that, when applied to a container element, restores the normal HTML styles to elements like paragraphs and titles.  So if you want to display a block of several normal paragraphs, you can enclose them in a "content" container and not have to create and apply your own CSS class to those paragraphs.

• I like the variety of the different container classes Bulma provides.  Initially I tried to lay out the main menu page using tiles but couldn't achieve the look that I wanted, and I ended up using "box" elements inside of "column" blocks.

• Some of the layout implementations can end up being very deep in terms of nesting.  Unless I'm designing for mobile, I tend to favor horizontal form layouts with the label and form control on the same line.  Bulma allows for this (and in a way that lets the labels and inputs still stack vertically when the screen becomes narrow, which is great), but each "row" of the form ends up using a lot of elements.  In the forms in the demo, the element tree containing each input ends up being:
  
  div.field.is-horizontal -> div.field-body -> div.field -> div.control -> input 
  
  Not the prettiest HTML to look at.

• I also ran into a problem unique to horizontal form layout where the label (to the left of the input) only reaches a certain width before is starts to wrap the label text to the next line (see https://github.com/jgthms/bulma/issues/1852).  There's no obvious workaround for it using the Bulma classes.  To get around it, I ended up creating some custom CSS styles that widen the label to certain widths and maintain the default spacing between the input "rows".

  .hz-label-150 div.field-label {
    min-width: 150px;
  }
  
  .hz-label-200 div.field-label {
    min-width: 200px;
  }
  
  .hz-label-250 div.field-label {
    min-width: 250px;
  }
  
  .hz-label-300 div.field-label {
    min-width: 300px;
  }
  
  .hz-label-150 div.field.is-horizontal,
  .hz-label-200 div.field.is-horizontal,
  .hz-label-250 div.field.is-horizontal,
  .hz-label-300 div.field.is-horizontal
  {
    margin-bottom: 0.75rem;
  }
  

  <form [formGroup]="profileForm" class="hz-label-200">...
  

Overall, I liked Bulma enough to consider using it for future projects.