CSSフレームワークBulmaがとてもいい

投稿日: 2018-10-02

技術情報

CSSフレームワークを入れ替えました

このサイトのフレームワークをBootstrapから、Bulmaに変更しました。

まだ移行したばかりなので、これから使いやすいように調整していきます。

Bulmaは日本語で「ブルマ」と呼びます。

ちょっと人前で言いづらい名前ですよね。

しかし安心(?)です。名前の由来はドラゴンボールからです。

この記述によれば、元々はトランクスというテーマジェネレータで、カプセル化→カプセルコーポレーション→ブルマという連想らしいです。

Bootstrapと比べて自分が気に入った点を挙げます。

BootstrapはjQueryが必須です。一方でBulmaはCSSのみで記述されています。

ただもちろん、JavaScriptがないとできないこともあります。

例えばハンバーガーメニュー(幅を狭くすると出てくる3本線)の開閉にはJavaScriptを使います。

サンプルコードのコピペでもOKです。ただしIE11ではアロー関数が使えないので書き換えが必要です。

Bootstrapの不満点として、修飾子(Modifiers)が分かりにくいことでした。

Bootstrapではコンポーネントなのか修飾子なのかが分かりづらく、 btn-lg のように不自然な省略形が使われています。

Bulmaでは button is-large のようにパッと分かりやすい修飾子が使えます。

Bootstrapで悩んでたのが、Navbarのような複雑なコンポーネントの場合、どのように書けばいいか分からないことでした。

とりあえず動かすことはできましたが、モヤモヤ感がのこりました。

Bulmaでは階層構造が明記されていて、分かりやすいです。

BulmaはIEはサポートしていません。

ただ、IE11で90%は動くと書いてます。

このサイトも一部表示が乱れますが、IE11で表示するように修正しています。