読者です 読者をやめる 読者になる 読者になる

Railsでmaterializeを使う

bootstrapのdiv地獄から抜け出したいと思った僕たちは、materializeを使うことにしました。

http://materializecss.com/

bowerでinstallする例も見かけますが、fontで不具合が起こったなどの投稿もみかけたので、gemでいれちゃいます。

https://github.com/mkhairi/materialize-sass

使い方は簡単。

Gemfileにmaterialize-sassを追加。

# Gemfile
gem "materialize-sass"

インストールしてください。

$ bundle install

あとは、任意のマニフェストファイルで@importすればokです。

このときマニフェストファイルは、.scss拡張子にしてください。@importを使うので。例えば、application.css.scssみたいに。

@import 'materialize'

テーマをオーバーライドするときは、以下のように先にcomponentsをimportして!defaultを追加してから全体をimportするみたい。

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

限界がきたら、以下の方法でそれぞれ@importするようになるかも。

https://github.com/mkhairi/materialize-sass/blob/master/app/assets/stylesheets/materialize.scss

application.jsでmaterialize-sprocketsをrequireしてください。

//= require materialize-sprockets

これで準備okです。