ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2