ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
Post on:2016年2月5日
sponsors
外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。
一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。
ブルマの特徴
ブルマはMITライセンスで、個人でも商用でもクライアントのプロジェクトでも無料で利用できます。
Flexboxで実装されたレスポンシブ対応のシンプルで柔軟なグリッド。カラムの増減も簡単！
ナビゲーションもレスポンシブ対応で、ロゴ・メニュー・検索など、さまざまな要素を簡単に配置できます。
フルスクリーンで天地中央配置など、最近人気の高いレイアウトも標準装備。
HTMLの各要素はclassを加えるだけで、さまざまなスタイルを適用できます。
よく使用されるエレメントはほとんど揃っていると言っていいでしょう。
ブルマのエレメントやコンポーネント
ブルマではさまざまな要素にスタイルが定義されており、classを変更するだけで簡単に利用できます。
グリッドはFlexboxを使い、柔軟なレイアウトに対応します。
ナビゲーションは水平タイプで、左にロゴ、中央にロゴ、端に検索など、エレメントを配置できます。
ボタン、タイトル、コンテンツ、タグ、メッセージ、パネルなどのエレメント類も充実。
フォームもベーシックなものから、サイズ変更やアイコンを添えたものまで揃っています。
最近のサイトで見かけるようなコンポーネントも非常に充実しています。
ソーシャルメディア用のコンポーネントも。
BootstrapやMaterial Designでもよく利用されるカード型コンポーネントも。
ブルマの使い方
ブルマは、一つのCSSファイルを外部ファイルとして記述するだけで利用できます。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="https//cdn.rawgit.com/jgthms/bulma/master/css/bulma.min.css"> </head> |
Sassも用意されており、カラーやフォントなどのカスタマイズにも柔軟に対応できます。
sponsors
