Bulmaとは
BulmaはFlexboxを利用したCSSフレームワークです。 デザイナーや開発者のコミュニティの間で人気が高まっていて、 JSを使わない、シンプルかつ軽量でカスタマイズがしやすいのが特徴です。 公式サイト GithubBulmaの良いところ
- CSSのみのフレームワークで軽い(minで 155 KB)
- heroやcardなどの他フレームワークにはないけどよく見るUIがたくさんある
- Flexboxで作られたグリッド
- sassファイルで作られてあり、変数などもドキュメントに記載がある
- 商用利用可
CSSのみのフレームワークで軽い(minで 155 KB)
軽いって素晴らしい。
ちなみにBootstrapはCSSのみで146KBでした。
CSNもあります。
CDNで配布もされているので、SCSSでカスタマイズしないなら、下記のコードで読み込めます。 ※bulumaの最新バージョンは時期によってどんどん上がっていきますので利用時は最新版をお使いください。<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
よく見るUIがたくさんある
よくページヘッダーにあるような、UIがあって使い勝手が良いです。
- Breadcrumb
- Card
- Dropdown
- Menu
- Message
- Modal
- Navbar
- Pagination
- Panel
- Tabs
- tile
Flexboxで作られたグリッド
今の時代に合わせて、flexboxで作られてるので中央合わせとかも簡単にできます。 あと地味に嬉しいのがcolumnの余白もis-*も足せば変更できるので使いやすいです。
広めの余白だったり。
余白なしだったり。
is-desktopとかをつければ、デスクトップサイズのときのみのグリッドレイアウトとかも可能です。
sassファイルで作られてあり、変数などもドキュメントに記載がある
COLORの変数も結構丁寧に書いてあるので、書き換えがしやすいです。
商用可
MITライセンスなので商用サイトでも全然使えます！ブラウザのサポート
Bulmaはautoprefixerで、（ほとんどの）Flexbox機能を以前のバージョンのブラウザと互換性を持たせます。 Bulmaは下記ブラウザの最新バージョンと互換性があります Chrome Edge Firefox Opera Safari ※Internet Explorer (10+) は一部対応。bulumaで注意するところ
Bulmaはbootstrapと同様にclass名がシンプルな物が多いです。 例えば、.deleteを使えば閉じるアイコンが表示されたりするので、既存のプロジェクトでいきなり追加するのは難しいです。
また複数のCSSフレームを入れているとうまく動かないことが予想されるので、当たり前とも言えますがCSSフレームを使うならBulma一本で進めたほうが良いです。