CSSフレームワークのBulmaが良かったので紹介します。
Bulmaとは
BulmaはFlexboxを利用したCSSフレームワークです。
デザイナーや開発者のコミュニティの間で人気が高まっていて、
JSを使わない、シンプルかつ軽量でカスタマイズがしやすいのが特徴です。
Bulmaの良いところ
- 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一本で進めたほうが良いです。
Bulmaが活躍する所
JSを使わないフレームということで、Nuxt.jsやVue.jsを使うプロジェクトと相性が良いです。
実際Nuxt.jsでBulmaと使うという記事がQiitaでも結構見られます。
Nuxt.jsにBulmaを導入して変数を使ったカスタマイズを行う
jQueryを使わないでいい場合はBulmaを選ぶ意味が出てきそうです。