Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。

Bootstrap Materialの使い方

ナビゲーションバー。入力欄にフォーカスするとちょっとしたアニメーションが実行されます。

ブロックレベルのボタン。縦横対応です。

ボタン。クリックやフォーカス時にちょっとだけ大きくなったりします。

フローティングアクションボタン。影が動きます。

アイコン。カラーリングにも対応しています。

テーブル。カラーリングが見やすいです。

フォーム。選択時にアニメーションが行われます。

ナビゲーション。

インジケータ。

プログレスバー。

スライダー。

リストグループ。

パネル。

ダイアログやツールチップ。アニメーションが分かりやすいです。

Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。

Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア(ライセンスは独自)です。

Bootstrap Material FezVrasta/bootstrap-material-design