ブルマがすごい!外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。

一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。

サイトのキャプチャ

Bulma
Bulma -GitHub

ブルマの特徴

ブルマはMITライセンスで、個人でも商用でもクライアントのプロジェクトでも無料で利用できます。

サイトのキャプチャ

Flexboxで実装されたレスポンシブ対応のシンプルで柔軟なグリッド。カラムの増減も簡単!

サイトのキャプチャ

ナビゲーションもレスポンシブ対応で、ロゴ・メニュー・検索など、さまざまな要素を簡単に配置できます。

サイトのキャプチャ

フルスクリーンで天地中央配置など、最近人気の高いレイアウトも標準装備。

サイトのキャプチャ

HTMLの各要素はclassを加えるだけで、さまざまなスタイルを適用できます。

サイトのキャプチャ

よく使用されるエレメントはほとんど揃っていると言っていいでしょう。

ブルマのエレメントやコンポーネント

サイトのキャプチャ

Modifiers

ブルマではさまざまな要素にスタイルが定義されており、classを変更するだけで簡単に利用できます。

サイトのキャプチャ

Grid

グリッドはFlexboxを使い、柔軟なレイアウトに対応します。

サイトのキャプチャ

NavBar

ナビゲーションは水平タイプで、左にロゴ、中央にロゴ、端に検索など、エレメントを配置できます。

サイトのキャプチャ

Elements

ボタン、タイトル、コンテンツ、タグ、メッセージ、パネルなどのエレメント類も充実。

サイトのキャプチャ

Form Controls

フォームもベーシックなものから、サイズ変更やアイコンを添えたものまで揃っています。

サイトのキャプチャ

Compornents

最近のサイトで見かけるようなコンポーネントも非常に充実しています。

サイトのキャプチャ

Media Object

ソーシャルメディア用のコンポーネントも。

サイトのキャプチャ

Card

BootstrapやMaterial Designでもよく利用されるカード型コンポーネントも。

ブルマの使い方

サイトのキャプチャ

Bulma Documentation

ブルマは、一つのCSSファイルを外部ファイルとして記述するだけで利用できます。

Sassも用意されており、カラーやフォントなどのカスタマイズにも柔軟に対応できます。

top of page

©2016 coliss