RailsにMaterizalizeデザインを導入する方法

Ruby on RailsにMaterizalizeデザインを導入する方法を紹介します。

RailsにMaterizalizeデザインを導入する方法

MaterizalizeのGemを追加します。Gemfileに以下を追記。

bundle installを実行します。

次にデザインを反映させます。

デフォルトのapplication.cssファイルの場合は、application.scssに変更する必要があります。

2行目でアイコンを読み込ませています。以下のようにGemでも対応できます。

・app/assets/stylesheets/application.scss

次にJSを適用させます。

application.jsに下記を追記します。

・app/assets/javascripts/application.js

サーバ再起動してRailsにMaterizalizeデザイン反映完了です。

RailsにMaterizalizeが反映されているか確認

ちゃんと反映されているかルーティング・コントローラ・Viewを作成して確認してみます。

・config/routes.rb

・app/controllers/samples_controller.rb

ViewにMaterizalize公式のサンプルを記述し、確認します。

・app/views/samples/index.html.erb

 

ちゃんとRailsにMaterializeが反映されていることを確認できました。

下記参考: