Cntlog > 開発 > フレームワーク > JS不要で使いやすいflextbox設計のCSSフレームワーク「Bulma」

JS不要で使いやすいflextbox設計のCSSフレームワーク「Bulma」

CSSフレームワークのBulmaが良かったので紹介します。

Bulmaとは

BulmaはFlexboxを利用したCSSフレームワークです。

デザイナーや開発者のコミュニティの間で人気が高まっていて、
JSを使わない、シンプルかつ軽量でカスタマイズがしやすいのが特徴です。

公式サイト

Github

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を選ぶ意味が出てきそうです。

関連記事

Google謹製Material Design Liteを触ってみた所感... Googleがマテリアルデザインの考えを取り入れた公式フレームワーク「Material Design Lite」(以下、MDL)を公開しました。 少し触ってみましたので、基礎的な使い方と自分の備忘録も兼ねてまとめてみます。 Material Design Liteとは ...
bootstrap並にイケてたCSSフレームワーク※サンプル有り... 新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。 Gumby Gumbyで作られたサイト 作成したサンプル CSSフレームワークって? CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単に...
Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。... Flexbox ベースのレスポンシブ CSS フレームワーク Dlex を作りしました。 もともと Flexboxは好きではなく、display:table派だったのですが、長いことFlexboxを放置していたのですが、 Disろうと思って学び直して見たらつい熱が入りフレームワーク化してしてま...
学習コストが低くて使いやすいCSSフレームワーク(Skeleton)... 最近色々なサイトを作る機会に恵まれました。 普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。 Skeletonとは Skeletonはとても...
CSSフレームワークの使いドコロ CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。 レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。 CSSフレームワークと...