2024-07-14

First experience with Bulma

Recently, I became interested in a CSS framework - Bulma, and found that its developer experience (DX) is excellent and more intuitive to use than Bootstrap. Not long ago, it launched version 1.0, so I would like to write a review to introduce it briefly.

Usage

To reference Bulma, the easiest way is to use the CDN link on the page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" />

Features

Here are a few features that I find very convenient to use compared to Bootstrap.

Column Layout

Using Column for layout, you will be impressed by the syntax. You only need to use columns and columns to automatically layout.

<div class="columns">
  <div class="column"></div>
  <div class="column">
    <strong>Bulma - Blog theme</strong> by <a href="https://gonzalojs.com">Gonzalo Gutierrez</a>.
    Based on the <a href="http://jigsaw-blog-staging.tighten.co/">jigsaw-blog</a>.
  </div>
  <div class="column"></div>
</div>

As shown in the figure above, the default is to divide the left and right equally, which will look a bit out of alignment.

<div class="columns">
  <div class="column is-2"></div>
  <div class="column is-8">
    <strong>Bulma - Blog theme</strong> by <a href="https://gonzalojs.com">Gonzalo Gutierrez</a>.
    Based on the <a href="http://jigsaw-blog-staging.tighten.co/">jigsaw-blog</a>.
  </div>
  <div class="column is-2"></div>
</div>

There is also a 12 columns system. Here I set is-8 to make the width wider.

Component settings

For example, the setting of Navbar uses fewer levels.

<!--Bootstrap-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item" routerLinkActive="active">
      <a class="nav-link">Member</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
      <a class="nav-link">List</a>
    </li>
    <li class="nav-item" routerLinkActive="active">
      <a class="nav-link">Order</a>
    </li>
  </ul>
</div>

<!--Bluma-->
<div id="navbarBasic" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item" [routerLink]="['/member']">Member</a>
    <a class="navbar-item" [routerLink]="['/list']">List</a>
    <a class="navbar-item" [routerLink]="['/order']">Order</a>
  </div>
</div>

is-* syntax

This is also where I think the developer experience is very good. Like the Column Layout above, is-8 and is-2 are used to set the width.

<input class="input is-link" type="text" placeholder="Link input" />
<input class="input is-small" type="text" placeholder="Small input" />
<div class="control">
  <input class="input is-focused" type="text" placeholder="Focused input" />
</div>

In addition, there are many such settings in input, such as is-link, is-small, and is-focused above. You can refer to the input chapter.

References

Bulma has a lot of resources to refer to. Although it is not as large as Bootstrap, I think there are still a lot of resources.

Free Bulma Templates: There are many free templates to use, and Blog 2 - Tailsaw is the template I use.

Awesome Bulma: Everyone is familiar with the Awesome series, a collection of various resources.

Conclusion

In conclusion, Bulma is indeed a very intuitive and easy-to-use CSS framework. Its developer experience (DX) is excellent, and it has a more concise syntax and design than Bootstrap. Especially in terms of layout and component settings, Bulma is worth a try, and the blog will also be updated with Bulma.