Bulma公式サイトから見るBulmaとBootstrapの違い

bulma公式サイトから見るbulmaとbootstrapの違い

Bootstrap使いのためのBulma解説サイトがあります

Bulmaの公式サイトを眺めていたところ、気になるページを見つけました。
それがこちら。> Coming from Bootstrap

どうやらBootstrapを使っている人向けのBootstrapとBulmaの違いの解説ページのようですね。
BootstrapとBulmaのそれぞれの特徴・違いが、簡単にですが説明されています。

私もCSSフレームワークはBootstrapをメインで使っていましたが、現在はBootstrap・Bulmaをメインで使っています。BootstrapからBulmaに入った口です。

今回は自分の勉強・復習も兼ねてComing from Bootstrapを参考に、BootstrapとBulmaの違いを書いてみたいと思います。
※英語がてんでダメなので間違っていたらごめんなさい。


Bulmaってなんぞ?って方は、まずこちらを読むのをおすすめします。
> 私的おすすめcssフレームワーク「bulma」その1
> 私的おすすめcssフレームワーク「bulma」その2

他にこんな記事も書きました。Bulmaを実際に使い始めた方向けの記事です。
> 知っておくと少し幸せになれるBulmaを使い方6選
> さらに知っておくと少し幸せになれるBulmaを使い方+5選

BulmaとBootstrapの違い

『Why choose』のざっくり翻訳

Coming from Bootstrapに記載されている『Why choose』をざっくり翻訳するとこんな感じです。

Bulma Bootstrap
・Flexbox、グリッドレイアウトを利用しています。
・最新のブラウザを想定したフレームワークですよ。
・Bulmaのグリッドシステムはシンプルです。
・Bulmaの書き方はシンプルで学習コストが低いですよ。
・Font Awesome 5をサポートしています。
・CSSのヘルパーは100以上ありますよ。
・JavaScriptは使っていません。CSSのみです。
・jQueryを使ってますよ。
・コミュニティが大きいので、調べるといろいろ出てきます。
・IE11での動作はBootstrapのほうが優れています。
・使えるコンポーネントはBootstrapのほうが多いです。

『Why choose』から察するに、Webサイト制作時、
・JavaScriptやjQueryが必要ならBootstrapを使ったほうが良いよ。
・JavaScriptを書く予定がない or あまり書かないならBulmaのほうが良いよ。
といったところでしょうか。あとはInternet Explorer11に対応するか否かとか。
ここから先は個人の好みでしょうね。

『Comparison table』のざっくりまとめ

『Comparison table』の内容はパッと見で分かると思います。
BulmaとBootstrapのコンポーネント・クラスの対応図です。
すべてを取り上げるとキリがないので、いくつかピックアップしてみます。

Grid system

Bulma Bootstrap
columns row
column col
tile

一番基本のGrid systemの違いです。
Bootstrapのrowがcolumnsに、colはcolumnに相当します。
また、Bulmaにはtileレイアウトが用意されています。

Layout

Bulma Bootstrap
container container
hero jumbotron
section
footer

Layoutの違いです。
へー。BootstrapにはBulmaのsection、footerに相当するものがないんですね。
なんかありそうな気もするのですが…。

Form

Bulma Bootstrap
field
field is-grouped button groups
field is-grouped input groups
control form-group
label label
input form-control
textarea form-control
select
checkbox checkbox
radio radio
file
button is-static form-control-static

Form周りの両フレームワークの違いをまとめたものです。
初めて気づいたのですが、Bootstrapにはselect、file用のクラスってないんですね。
探してみたら普通にありました。
> Bootstrap-select
> Bootstrap-file

まとめ

いかがだったでしょうか。
個人的にはBootstrapからBulmaに入った身として、両フレームワークの違いを知ることができて有意義でした。

最後に:Internet Explorer11について

BulmaとBootstrapの違いの説明内で、Internet Explorer11が出てきましたね。
ちょっと気になって、Internet Explorer11のシェアを調べてみたのですが、まだまだシェアあるんですね…
うーん。悩ましい…。せめてEdgeに移行してくれないかなぁ…