WebページのMaterialDesign化

ということでMaterial Design for Bootstrapを使ってみようと思い、自分のページをMaterialDesignっぽくしてみることにした

before

f:id:petitviolet:20141224100826p:plain

after

CardViewっぽくしただけ

f:id:petitviolet:20141224100834p:plain

やり方

https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip からダウンロードしてきて解凍し、material.min.csscssとして読みこむ

サンプル的なのはBootstrap Materialで見れる

なお、もともとBootstrapを使っている必要がある

今回使ったものたちは以下

CardView

CardViewっぽくするにはclass="well"ってやればよい

Shadow

いちおうヘッダーにはshadowをつけていて、これはclass="shadow-z-[n]とすればよい nには1~5の数字を入れる

ButtonGroup

ボタンをひと続きのボタンにするにはclass="btn-group btn-group-justified"とすればよい btn-group-flatとかすればフラットになる

雑感

こんなスマホだと画像の配置が乱れるような雑なページではあんまり効果はわからないが、
スマホ対応なWebアプリ作る際に、楽にMaterialDesign対応できて便利そうだと思った

商用で使う場合にはLICENSE.mdにあるように作者に連絡して許可を取る必要がある点に注意