Material Design Liteを利用することで簡単にマテリアルデザインを利用したサイトを構築することができます。
細かく汎用クラスが設定されており、よく使いそうなクラスをメモしておきます。
Material Design Lite
テキスト色と背景色を変更する
以下の例のクラスのカラー名と数字をマテリアルデザインのパレットに当てはめることで色を指定できます。
色指定の詳細はこちらの記事にリストで掲載されており、ありがたかったです。
Material Design Liteの文字色・背景色変更用class名と色の見本帳
テキスト色を変更する（例：レッドの100%）
mdl-color-text--red-100
背景色を変更する（例：レッドの100%）
mdl-color--red-100
テキストの位置を調整する
//真ん中 mdl-typography--text-center //左寄せ mdl-typography--text-left //右寄せ mdl-typography--text-right
フォントの太さを調整する
//font-weight:200 mdl-typography--font-thin //font-weight:300 mdl-typography--font-light //font-weight:400 mdl-typography--font-regular //font-weight:500 mdl-typography--font-medium //font-weight:700 mdl-typography--font-bold //font-weight:900 mdl-typography--font-black
縦位置真ん中レイアウト
<div class="mdl-grid"> <div class="mdl-cell--middle"> 縦位置真ん中 </div> </div>
グリッドスタイルのpaddingを0に
mdl-gridと同時に利用します。
<div class="mdl-grid mdl-grid--no-spacing"> </div>
