Materialize
公式ページ
マテリアルデザインを実現してくれるCSSフレームワーク。
bowerでインストールできます。
マテリアルデザインとは
グーグルが提唱する、実世界のもの延長で認識したり操作したりできるようなデザイン。現実のものを連想させる暗喩「マテリアル・メタファー」がキーワードで、これが名前の由来になっている。
（フラットデザインは製品の材質に合わせるマテリアルネオスティ）
できること
twitter bootstrapなどを使ったことがある人とが最初に気になるようなことはできる。
レスポンシブデザイン
画面サイズにあわせて表示・非表示を設定したり、グリッドシステムは、
<div class="hide-on-samll-only">サイズに合わせて表示・非表示</div>
<div class="col s12 m6 l3">グリッドシステム</div>
などのようにクラスで指定する。画面サイズはSmall, Medium, Largeの三段階。
色
色の指定は、
<div class="red lighten-3">
<div class="yellow-text darken-2" >赤背景・黄色文字</div>
</div>
のように色名や明るさ・暗さ、文字色を指定する。
影
フラットデザインだと薄くなった影ですが、現実世界には影があるので、マテリアルデザインでは無視できないでしょう。
<p class="z-depth-2"></p>
のようにZ方向を指定するような書き方をする。
タブ
タブを押して表示を切り替えることをしたいと思うことがあるでしょう。それもできます。ただし、注意が必要です。javascriptによる初期化が必要です。
<ul class="tabs">
<li class="tab"><a href="#tab1">タブ1</a><li>
<li class="tab"><a href="#tab2">タブ2</a><li>
</ul>
<div id="tab1">内容1</div>
<div id="tab2">内容2</div>
のようにhtmlを書き、
$(document).ready(function(){
$('ul.tabs').tabs();
});
で初期化する。他の機能もこのような初期化を必要とするので、うまくいかなかったら、これを確認するといいかもしれません。
波
公式ページをいじっていたら直ぐに気がつくと思うのですが、ボタンを押すと波のようなエフェクトがでる！
<a href="#!" class="btn wave-effect waves-red"></a>
のようにする。エフェクトの色も指定できる。（例は赤）
他にも機能があるので、興味があったら公式ページを是非見てください。
参考リンク
マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー
Materialize - マテリアルデザインのためのCSSフレームワーク