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...

Comments

[Josué Gabuardi]

Not saying your tip is bad, it can be useful definitely. However, it's semantically wrong to use a p tag for a table so in the case your target is make a table the semantically correct according to the HTML standards is to use table tag even if it is a little more of code.

If you're making a list of items because a dropdown and content index or something similar your tip becomes very useful because you shouldn't use a table on those cases anyways but a ul or ol would be semantically accurate.

Also.. when I searched "Bulma Tips" the first result in Google is yours.. so I would take advantage of that to develop a full useful Bulma tips article... but following conventions and good practices.
Greetings!