nlog

とめどなく流れるよだれ

Bulma と Bootstrap の比較

css

Coming from Bootstrap というページがあって、Bootstrap の代わりとして Bulma はどう機能するか、という話がされている。Bootstrap の情報が少し古い気がするので、まぁ参考程度に（たとえば、機能の比較表で Bootstap にCard コンポーネントがないと書かれているが、実際 Bootstrap 4.1 ではある）。

Bulma も Bootstrap も CSS フレームワークで、手っ取り早く Web サイトを立ち上げるためにつくられているのは同じ。

その中で Bulma を選ぶ理由は、

  • モダンな CSS 。すでに Flexbox を使っており、さらに今後は CSS Variables や Grid Layout を使う計画がある
  • シンプルなグリッドシステム。親要素のコンテナーに .columns 、子要素に .column を指定するだけでグリッドは完成する
  • 簡単に学べるシンタックス。.button のようなベースクラスに .is-primary などの Modifier クラスを合わせて指定するだけで見た目が変えられる
  • Font Awesome 5 のサポート。最初から .icon で Font Awesome 5 のアイコンが表示できるようになってる
  • 100 以上のヘルパークラス。clearfix など一般的なものはもちろん、レスポンシブやタイポグラフィなど機能的なものもある
  • JavaScript を使ってないこと。CSS にフォーカスすることで、JavaScript のオプションを用意する必要がなくなり、フレームワーク全体の複雑さを減らす

じゃあ逆に Bootstrap を選ぶ理由でいうと、

  • jQuery を使ってインタラクションをつけれること
  • 大きなコミュニティがあること。その結果、テーマやプラグインの数が Bulma より豊富で、詰まったときの答えもインターネットに多く存在する
  • IE 11 との互換性が高いこと。Bulma も IE 11 を 90% 以上サポートしているが、Bootstrap のサポートはそれ以上に手厚い
  • Bulma にないコンポーネントを Bootstrap では持っていたりする

そしてここからは個人の感想。Bootstrap 以上に Bulma はデザインの部品化がうまくできていて、機能が小さくまとまっている印象。これは Modifier クラスを使った設計や JavaScript を使わない方針が背景にあると感じる。モダンな CSS って意味では Bootstrap も別に一緒だと思うし、ヘルパークラスの数なんかも Bootstrap とそんな変わらないと思う。あと Bulma は IE のサポートが 弱いのは弱点だと思う。ただドキュメントを見た雰囲気では、自分の中で Bulma のほうに軍配が上がってる。すぐに、手軽に使いやすそうだから。