Androidはワンツーパンチ 三歩進んで二歩下がる

プログラミングやどうでもいい話

Material Design Lite for SassでRailsアプリケーションにGoogleのMaterial Design LiteとMaterial IconsとRobotoフォントを導入する

Google製のマテリアルデザインとマテリアルアイコンとRobotoフォントをRubyアプリケーションで使うための「Material Design Lite for Sass」というgemを使います。

github.com

このgemはgoogleMaterial Design LiteのSaasバージョンです。

github.com

導入

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を見て下さい。

デフォルトではマテリアルデザインの全てのコンポーネントがimportされていますが、個別に指定する方法もあります。

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';