Bootstrapの記事はたくさんあるのにMaterial Design Liteは紹介されているばっかりで実装に関する情報が全然ないです。
Material Design LiteはMindBEMdingと言う命名規則に則って書かれている。個人的にはBootstrapのOOCSSより使いやすい。
コンポーネントが少なくゴリゴリ書かなければいけない系のフレームワークなので、まず最初にブレイクポイントぐらい知っておきたいですよね。
/* =================================
Media Queries
================================== */
@media (max-width: 479px) {
.demo:before { content: "phone";}
}
/* ---------------------------------
phone
---------------------------------- */
@media (max-width: 479px) {
.demo:before { content: "phone";}
}
/* ---------------------------------
tablet
---------------------------------- */
@media (max-width: 839px) {
.demo:before { content: "tablet 以下";}
}
@media (min-width: 480px) and (max-width: 839px) {
.demo:before { content: "tablet";}
}
@media (min-width: 480px){
.demo:before { content: "tablet 以上";}
}
/* ---------------------------------
desktop
---------------------------------- */
@media (min-width: 840px) {
.demo:before { content: "desktop";}
}
/* ---------------------------------
desktop large
---------------------------------- */
@media screen and (min-width: 1025px) {
.demo:before { content: "desktop large";}
}
こんな感じです。普通ですね。
Material Design Liteを使う前に知ってほしいことはフォーム回りが貧弱だということです。
詳しくはコンポーネントを見てください。