Material Design Lite for SassでRailsアプリケーションにGoogleのMaterial Design LiteとMaterial IconsとRobotoフォントを導入する
Google製のマテリアルデザインとマテリアルアイコンとRobotoフォントをRubyアプリケーションで使うための「Material Design Lite for Sass」というgemを使います。
このgemはgoogle製Material Design LiteのSaasバージョンです。
導入
Gemfileに次のように記述します。
gem 'material_design_lite-sass'
bundle install しておきます。
/app/assets/stylesheets/application.scss に次のように記述します。
@import 'material';
Attention! デフォルトでは.cssの拡張子でファイルが作成されます。.scssに変更し、*= require_tree . と *= require_selfを削除する必要があります。
オリジナルのapplication.cssをそのままにしたい場合、同じフォルダにcustom.scssを作成し@import 'material'する方法もあります。
app/assets/javascripts/application.js に次のように記述します。
//= require material
TurbolinksについてはMaterial Design Liteはサポートしてないので、READMEを見て下さい。
Material Iconの使い方
<i class="material-icons">info</i>
上の例では"info"のところにマテリアルアイコンの名前を入れます。
マテリアルアイコンの名前は↓のリストにあるものです。
material.io
Saasバージョンで使える変数はこちら↓
material_design_lite-sass/_variables.scss at master · rubysamurai/material_design_lite-sass · GitHub
変数の内容をoverrideする場合は、@importする前に記述する必要があります。↓が例です。
$layout-header-bg-color: rgb(128,128,128) !default; @import 'material';