脱bootstrap!! Bulmaをつかってみた

2017年7月10日

エンジニアの谷本です。
個人的なちょこっとしたWebシステムを作る時にデザインで悩んでしまいます。そうCSSフレームワーク!今まではなんとなくBootstrapを使っていましたが以下のような悩みがありました。

    • 脱Bootstrapしたい
    • ビルドしてminifyしてビルド時に組み込んで…みたいなのはだるい
    • 頑張ってカスタマイズするほどCSSの知識がないし、見た目そこそこキレイならなんでもよし!!

そんなデザインで悩んでいる時に知り合いの方からBulmaいいよ!とおすすめされたので使ってみました。使ってみるととっつきやすく、レスポンシブに対応しBootstrap相当のコンポーネントはあるし、見た目もそこそこいい感じになりました。
そんなBulmaのよさについて紹介したいと思います。

Bulmaのここがいい!

1. 導入が簡単

導入方法は3つあります。

  1. npm install bulma
  2. CDNで配信されているのを使う
  3. githubからファイルダウンロード

npmを使うもよし、ダウンロードして使うもよしの依存関係のすくなさはよいです。コンテキストによってどの方法を選んでも良いと思います。
個人的な評価ポイントとしては3のgithubにはsassも提供されているのでカスタマイズや拡張も考慮されているのがよいです。
私の場合には開発段階ですしIntellij上で補完してほしかったのでファイルダウンロードして使っています。

2. 公式のドキュメントがわかりやすい

Bulmaのドキュメント

ドキュメントでは一通りのコンポーネントやレイアウトについて説明されています。サンプルと見た目がセットになっているのでドキュメントを参照しながら記述するときに助かります。

ボタンのサンプル

Bulma Templatesというよくあるデザインテンプレート集があり、雰囲気をつかむために眺めてみるのがおすすめです。
以前であれば調べながら思い描く全体レイアウトを試行錯誤しつつ構築していましたが、テンプレートには一般的に使われるレイアウトが揃っているので、ひとまず近いイメージのレイアウトをコピペして大枠を整えてから修正していくことでいいかんじにレイアウトを整えることができました。

Bulma Templates

3. 装飾するためのクラス名が分かりやすい

シンタックスについての説明ページにありますがコンポーネントの色やサイズを装飾するさいのクラス名はis-*has-*という命名になっています。個人的にこの命名はわかりやすく、コード補完と相性がよいので気に入っています。
タイムライン形式のサンプルページを見ると通知メッセージにis-*が、 ナビバーにhas-*が使われています。

どこかで見たことのあるマイクロブログ。タイムライン形式のデザインテンプレート

is-*のクラスはグリッドを使う際にはよく出ます。is-half やis-three-quartersといったいい感じにしてくれるクラスからis-2is-10のようなサイズがきっかりしたクラスもあるので場面ごとに使い分けていけます。
装飾に関するクラスは自然言語に近い構文で記述することができるので、すぐに慣れてすんなり使い始めることができました。

まとめ

依存関係がなく導入が簡単、充実したドキュメント、分かりやすい命名は個人的なWebシステム開発であれば十分に事足ります。もしカラー変更や装飾を増やしたいのであればsass/cssファイルをいじるなりして拡張することもできます。
軽量ながら必要な要素が揃っているBulmaはBootstrapの置き換えて使うには十分です。

余談ですがVue.jsを使っているならばBulmaをベースとした軽量なUIコンポーネントの「Buefy」でBulmaを利用できるのでVue.jsユーザーは簡単導入できるかと思います。
以上、必要なコンポーネントが揃っていて軽量、簡単なCSSフレームワークBulmaの紹介でした。