Vue.jsからまたRuby on Rails(以降RoRで略します)中心でフロントをいじる感じになりそうなため、リハビリの意味をこめて、改めてRoRでフロント作成、簡単なポートフォリオを作ろうかなと思います。
その中でmaterialize-sassというgemをベースにフロントを簡単に実装しました。
本記事では、その導入方法を自分なりのメモとして記載します。
利用した教材
Udemyで購入したこちらのコースです。セクション12にて、materialize-sassを利用したコースがあり、それを元に進めました。
Materializeとは?
タイトルのMaterializeとは、Googleが設計・作成したCSSフレームワークです。
BootstrapライクなCSSフレームワークのようです。普段、自分もBootstrapにお世話になっているので、変なところに躓かなくてもすむかな・・・と思い、今回使用することにしました。
本題
以下、READMEに記載されている手順を元に進めていきます。
導入
Gemfile
にmaterialize-sass
とアイコン表示用のmaterial_icons'
を追記します。
gem 'materialize-sass', '~> 1.0.0' gem 'material_icons'
app/assets/stylesheets/application.scss
に以下を追加します。
*= require material_icons
@import 'materialize';
追記後のイメージとしては以下になります。
/* * 〜省略〜 * *= require_tree . *= require material_icons *= require_self */ @import 'materialize';
app/assets/javascripts/application.js
も同様です。
//= require materialize
最後にbundle install
します。
bundle install
実装
では試しに実装してみます。今回はナビゲーションバーを追加するため、以下のリンクに遷移します。
サンプルコードがhtmlで記述されています。
今回はLeft Aligned Links
を使用してみます。サンプルコードをコピーし、対象のerb
ファイルにそのまま貼り付けてください。
※ナビゲーションバーなので、おそらくテンプレートであるapplication.html.erb
の上部とかに追記すると良いかもです。
<nav> <div class="nav-wrapper"> <a href="#" class="brand-logo right">Logo</a> <ul id="nav-mobile" class="left hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <li><a href="collapsible.html">JavaScript</a></li> </ul> </div> </nav>
その状態でrails s
なりで起動、表示してみるとこんな感じで表示されると思います。
キャプチャの方は、少し自分用に見出しを変更していますが、同等の内容が表示されるかと思います!
Materializeの基本色を変えたい
こちらもREADMEに記述していただいてます。app/assets/stylesheets/application.scss
の記述内容を変更することで実現可能なようです。
そのままの場合
app/assets/stylesheets/application.scss
@import 'materialize';
イメージ
変更した場合
app/assets/stylesheets/application.scss
@import "materialize/components/color-variables"; $primary-color: color("blue", "lighten-2") !default; $secondary-color: color("yellow", "base") !default; @import 'materialize';
イメージ
primary-color
とsecondary-color
に対して任意の色を設定することで変更できるようです。(secondary-color
は今回使用しなかったので、表示されていません。)
サンプルソースコード
実際にMaterialize
を導入したリポジトリです。erb
ではなくslim
で記述しています。もしよろしければ、参考にしていただければと思います!
さいご
読んでいただきありがとうございました。もし、内容に間違い等ありましたら、FBいただけると助かります!
余談
Railsでフロント周りを触りました。ちょっと楽しかったのと、色々思い出せてよかったです。(テンプレートとかあったなーという感じでした。)
あと完全余談ですが、こんなサイトもありました。(本当かわからないけど、やはりBootstrapは多くの方に使用されている感じがしました。)