Material Design Liteとは
Google謹製のマテリアルデザインの概念で作られたフレームワークです。 操作性・見た目をマテリアルデザインで形成しており、HTML、CSS，JavaScriptのコンポーネントを組み合わせて、手軽にウェブサイトやブログ、ランディングページなどを作成することができます。 またMDLで作られたページはブラウザの差異、デバイスに依存しないなどプログレッシブ・エンハンスメントとは逆の考え方で作られてます（多分） ちなみにGoogleでは2014年「Web Starter Kit」というMDLに似たフレームワークが発表されていました。 FAQにはMDLは「Web Starter Kit」の進化版のようなものと記載されています。（多分） FAQブラウザ対応
みんな最初に気になるブラウザ対応ですが、MDLはすべてのブラウザ（Chrome, Firefox, Opera, Microsoft Edge）そしてSafariにも対応しています。 ただIEは基本10以上を推奨しておりIE9は少し見た目が変わる程度の劣化でサポートは可能とのことです。 FAQ ちなみにIE8はサポートしないと明言されています。Material Design Liteの使い方
とても簡単です。 CDNが用意されているのでコピペして読み込むだけ。 [html] <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> [/html] ねっ、簡単でしょ。その他の特徴
他にも気になる細かい特徴がありましたので羅列します。とても軽い
JSとCSSを合わせて、27KBという軽量っぷりです。 ちなみにbootstrapは180KB 私の体重はお察し…。CSSの設計がBEM
BEMとはCSSの命名規則の一つで、Block, Element, Modifier の3つ構成で成り立っています。 噂で見たことあったくらいで私も詳しくはありませんのでこれから覚えようと思います。 ちなみに私はOOCSSの設計が好きです。CSSプリプロセッサ
Web Starter Kit同様、Sassを使われています。 LESSの対応の予定はないようです。…辛い。コーポネント（一部）抜粋
一番大事なポイントですね。 マテリアルデザインを利用したパーツがいくつも用意されています。 コンポーネントを正しく利用するには、マテリアルデザインのゴールや重要性を理解しておくことが重要になってきます。Googleの公式ドキュメントに目を通していないひとは、一度確認してくださいとGoogle先生が言っています。BADGES（バッジ）
[codepen_embed height="268" theme_id="0" slug_hash="YXjMpd" default_tab="result" user="contiki9"]See the Pen MDL|Badges by conti (@contiki9) on CodePen.[/codepen_embed]BUTTONS（ボタン）
ボタンもシンプル。 .mdl-button--raisedでボックス型。 .mdl-button--fabでサークル型のボタンにできる。 .mdl-js-ripple-effectを付けることでエフェクトをつける。 disabledの付けることでクリックをさせないようにできる。 [codepen_embed height="268" theme_id="0" slug_hash="BNPEpa" default_tab="result" user="contiki9"]See the Pen MDL|BTN1 by conti (@contiki9) on CodePen.[/codepen_embed]カード
See the Pen MDL|CARD by conti (@contiki9) on CodePen.
カードの基本レイアウト構成。
[html] <div class="mdl-card"> <div class="mdl-card__title"> ... </div> <div class="mdl-card__media"> ... </div> <div class="mdl-card__supporting-text"> ... </div> <div class="mdl-card__actions"> ... </div> </div> [/html] 他にも、ローディングやグリッドレイアウト、ドロップダウンメニュー、トグルボタン、ツールチップなど様々（最低限）のパーツ（Components）は揃っています。 全部触ってると時間が足りないので、取りあえず今回はこの辺でとどめておきます。所感
MDLは他のCSSフレームワークと異なり、マテリアルデザインを実行するための最低限のフレームワークといった印象です。 Web Starter Kit（以下WSK）が出た時も感じたのですが、これらのフレームワークは我々制作者に何かを始めさせる（慣れさせる・覚えさせる）ために用意されたフレームワークのように感じます。 WSKでは、gulpなどのタスクラインナー、MDLではマテリアルデザインなど、流行らせたい属性に合わせて用意されたようなもののように感じています。 フレームワーク全般に言えることなのですが、フレームワークを使うだけではすごいものは出来ません。できるものができるだけです。 フレームワークは道具の集まりです。 道具を理解してモノを作るのが製作者だと思うので、フレームを理解し、道具の適材適所を見極め、自分のスキルを融合させることで初めて自分なりのモノが創りあげれると思います。 ようは、使ってみて、ソースを読んで、覚えて、最後には、俺が・わたしが！
マテリアルデザインだ！
となろうとさせるフレームワークそれがMaterial Design Lite！って感想です。 ところでだれか、関西でマテリアルデザインの勉強会開いてください。 私待ってる。