Useful Bulma CSS Tip

I've been a big fan of Bulma ever since I first discovered it a few years ago. Bulma is a free, open source CSS framework based on Flexbox, created by Jeremy Thomas.

I love simplicity

I love the fact that Bulma is purely CSS and no javascript. Here's a nice comparison with Bootstrap. The class names and modifiers are all easy to remember and intuitive. (After using it a few times, you'll pick up the naming schemes for the modifiers quickly, and you'll refer to the docs less and less frequently). It is also very easy to customize or overwrite (without the need for !important).

Tip

Here's a simple table using Bulma's table class:

<table class="table is-fullwidth">
    <tr>
      <td>Hall of Fame</td>
    </tr>
    <tr>
      <td>Michael Jordan</td>
    </tr>
    <tr>
      <td>Magic Johnson</td>
    </tr>
    <tr>
      <td>Larry Bird</td>
    </tr>
    <tr>
      <td>Shaq</td>
    </tr>
  </tbody>
</table>

Like most people, I don't enjoy writing HTML tables. It's a lot of markup.

But if you use Bulma's .panel-block class, you can achieve the same table-like look with far less markup.

<p class="panel-block">Hall of Fame</p>
<p class="panel-block">Michael Jordan</p>
<p class="panel-block">Magic Johnson</p>
<p class="panel-block">Larry Bird</p>
<p class="panel-block">Shaq</p>

Here's the result. (Slightly bigger padding-top and padding-bottom makes it a bit more readable as well.)

Thanks for reading. More Bulma "hacks" and tips to come...