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

マテリアルデザインを実践していきたいと思っても、デザインとアニメーションを理路整然と実装するというのはとても難しいことです。そのためお勧めの方法としては既に幾つかあるフレームワークを導入することです。

デザインはもちろん、アニメーションが自分の好き好きに合うか、これはフレームワークを選定する上で大きな要素になってきそうです。今回紹介するMUIについてはどうでしょうか。

MUIの使い方

ボタン。
ボタン。

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

フォーム。
フォーム。

グリッドシステム。
グリッドシステム。

タイポグラフィ。
タイポグラフィ。

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

アクセントテキスト。
アクセントテキスト。

ドロップダウン。
ドロップダウン。

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

テーブル。
テーブル。

分割表示。
分割表示。

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

リスト。
リスト。

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

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

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

MUI - Material Design CSS Framework

amorey/mui

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2