これまでCSSフレームワークといえば、Bootstrapばかり使っていましたが、BootstrapのためにjQueryを引き込むことに抵抗を感じるようになっていました。 そんな時、Bulmaというフレームワークを知ったので、調べた結果を簡単に纏めておきます。
Bulmaの特徴としては、
といった点か。
Bootstrapと同様に、Bulmaもレスポンスデザインに対応していて、モバイルファーストを意識した作りとなっている。
Bulmaはsassで記述されていて、各構成要素が独立したsassソースとして分割されているため、利用者は必要なモジュールのみを取り込んで使うことができる。 また、sassの変数をオーバーライドすることで配色などのカスタマイズも簡単にできる。
Flexboxは、CSS3のflexible boxのこと。これを使うと、floatを使わずにレイアウトできるようになり、BulmaはGridやLayoutの機能にFlexboxを採用している。
MITライセンスなオープンソースとして公開されている。
Bootstrapは、modalやdropdownなどのコンポーネントのためにJavascriptを提供している(jQueryに依存している)が、BulmaはCSSのみで構成されている。 (http://bulma.io/documentation/components/modal/)
Bootstrapが提供するコンポーネントと同様のコンポーネントをBulmaも提供している。 具体的には、
があるし、
といった基本的な要素に対するCSSクラスも揃ってる。
また、FontAwesomeに互換性のあるCSSクラスを提供しているのも嬉しいかもしれない。 (http://bulma.io/documentation/elements/icon/)
Bootstrapと比較しても機能的に遜色ないように思えてます。
ここのところ、Electron+Webpack+React+Redux+Sassなアプリケーションを作ろうとしていて、Bootstrapを入れようかどうか迷っていたところでBulmaを知ったので、Bulmaを使おうと思いましたし、このブログにも採用したいところです。
Bulma、良さそうです。