マテリアルデザインを実践していきたいと思っても、デザインとアニメーションを理路整然と実装するというのはとても難しいことです。そのためお勧めの方法としては既に幾つかあるフレームワークを導入することです。 デザインはもちろん、アニメーションが自分の好き好きに合うか、これはフレームワークを選定する上で大きな要素になってきそうです。今回紹介するMUIについてはどうでしょうか。

MUIの使い方

ボタン。

大きさや浮かび上がり方を指定できます。

フォーム。

グリッドシステム。

タイポグラフィ。

テキストを白くした場合。

アクセントテキスト。

ドロップダウン。

アプリバー。アプリのviewportに合わせて幅を自動調整してくれます。

テーブル。

分割表示。

素のHTMLでセマンティックな表示も。addr/emなどが使えます。

リスト。

レスポンシブについて。1200/992/768で分かれています。

MUIの特徴としては軽量（ミニファイ&Gzipしたスタイルシートが5.7KB、JavaScriptが3.0KB）、外部ライブラリに非依存、カスタマイズが容易、HTMLメールフレンドリーなどがあります。デザインパターンも多く用意されていますのでぜひチェックしてみてください。

MUIはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。

MUI - Material Design CSS Framework amorey/mui