RailsでMaterial Design Liteを使う

Material Design Lite (MDL)

Googleの提供しているデザインフレームワーク
Material Design Lite

マテリアルデザインのサイトを作れます

前提条件

参考環境
Rails 4.2.4
Ruby 2.2.1
MDL 1.0.6

導入

1. Downloadページからjsとcssの一式を入手
2. Railsのapp/assets/javascripts/にmaterial.jsファイルを、app/assets/stylesheets/にmaterial.cssファイルをコピー

使い方

componentsページに書いてある通りにパーツを使う

turbolinksを使わない

RailsのturbolinksはMDLと相性が悪い。turbolinksが有効だと、最初のページ読み込み時は正常に動作するけど、ページ遷移とかすると途端にMDLが動作しなくなってしまう。

対応策:turbolinksをオフにする

turbolinksがオンのまま使う方法もありそうだけど、すぐに動かしたいときなどは以下の方法がオススメ。
lang:app/assets/javascripts/application.jsにturbo linksを使用するように設定されているので、その行を削除する。

変更前

app/assets/javascripts/application.js

//
//= require jquery
//= require jquery_ujs
//= require turbo links
//= require_tree .

変更後

app/assets/javascripts/application.js

//
//= require jquery
//= require jquery_ujs
//= require_tree .

以上でMDLがRailsで動きました。おしまい。

参考URL