f:id:kic-yuuki:20190223164443p:plain

Vue.jsからまたRuby on Rails（以降RoRで略します）中心でフロントをいじる感じになりそうなため、リハビリの意味をこめて、改めてRoRでフロント作成、簡単なポートフォリオを作ろうかなと思います。

その中でmaterialize-sassというgemをベースにフロントを簡単に実装しました。

本記事では、その導入方法を自分なりのメモとして記載します。

利用した教材

Udemyで購入したこちらのコースです。セクション12にて、materialize-sassを利用したコースがあり、それを元に進めました。

Materializeとは？

タイトルのMaterializeとは、Googleが設計・作成したCSS フレームワークです。

materializecss.com

BootstrapライクなCSS フレームワークのようです。普段、自分もBootstrapにお世話になっているので、変なところに躓かなくてもすむかな・・・と思い、今回使用することにしました。

本題

以下、READMEに記載されている手順を元に進めていきます。

materialize-sass/README.md at master · mkhairi/materialize-sass · GitHub

導入

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

実装

では試しに実装してみます。今回はナビゲーションバーを追加するため、以下のリンクに遷移します。

Navbar - Materialize

サンプルコードが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なりで起動、表示してみるとこんな感じで表示されると思います。

f:id:kic-yuuki:20190223165219p:plain

キャプチャの方は、少し自分用に見出しを変更していますが、同等の内容が表示されるかと思います！

Materializeの基本色を変えたい

こちらもREADMEに記述していただいてます。app/assets/stylesheets/application.scssの記述内容を変更することで実現可能なようです。

そのままの場合

app/assets/stylesheets/application.scss

@import 'materialize';

イメージ f:id:kic-yuuki:20190223165346p:plain

変更した場合

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

イメージ f:id:kic-yuuki:20190223165414p:plain