【Rails on Docker】CSSフレームワークをBootstrapからMaterializeに移行した

Introduction

CSSフレームワークといえばBootstrapということで利用していたのですが、MaterializeというのがBootstrapライクにマテリアルUIが実装できるとあって気になっていまして、S-BRSTでリリース後に切り替えてみました。

Bootstrapをアンインストールして、Materializeをインストールするだけなのですが手こずったので手順をまとめておきます。

Materialize使いやすい！きれい！

前提

• Rails 5.2.3
• Bootstrap -> GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etcを利用

Gemfile

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

app/assets/stylesheets/application.scss

@import "bootstrap";

app/assets/javascripts/application.js

//= require jquery3
//= require popper
//= require bootstrap

1. Bootstrapをアンインストール

GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etcにそって設定した項目のうちMaterializeに不要な設定をきれいにします。jQueryは使いたいから残す。

Gemfile

gem 'jquery-rails'

app/assets/stylesheets/application.scss

app/assets/javascripts/application.js

  //= require jquery3

2. Materializeをインストール

MaterializeのインストールはGitHub - mkhairi/materialize-sass: Materializecss rubygem for Rails Asset Pipeline / Sprocketsを利用させていただきました。

Gemfile

gem 'materialize-sass', '~> 1.0.0'
gem 'jquery-rails'

app/assets/stylesheets/application.scss

@import "materialize";

app/assets/javascripts/application.js

//= require jquery3
//= require materialize

あとはGemfile.lockにBootstrapの情報が残ったままになってしまっているので一度からファイルにしてgemのインストールをし直します。

$ rm Gemfile.lock
$ touch Gemfile.lock
$ docker-compose build

以上でBootstrapからMaterializeへの移行完了です！

3. 【応用】Bootstrapのpadding/margin使いやすいですよね。

padding, marginの設定の簡単さはBootstrapの魅力でした。
Bootstrapでなくてもあの機能を使うために、mixinを自作します。（Bootstrapのソースを参考に）

app/assets/stylesheets/_spaces.scss

@each $prop, $prop_sub in (margin: m, padding: p) {
  @for $size from 0 through 5 {
    $rem: $size * 0.5;
    @each $direct, $direct_sub in (top: t, bottom: b, left: l, right: r) {
      .#{$prop_sub}#{$direct_sub}-#{$size} {
        #{$prop}-#{$direct}: #{$rem}rem!important;
      }
    }
    .#{$prop_sub}x-#{$size} {
      #{$prop}-right: #{$rem}rem!important;
      #{$prop}-left: #{$rem}rem!important;
    }
    .#{$prop_sub}y-#{$size} {
      #{$prop}-top: #{$rem}rem!important;
      #{$prop}-bottom: #{$rem}rem!important;
    }
    .#{$prop_sub}-#{$size} {
      #{$prop}: #{$rem}rem!important;
    }
  }

  @each $direct, $direct_sub in (top: t, bottom: b, left: l, right: r) {
    .#{$prop_sub}#{$direct_sub}-auto {
      #{$prop}-#{$direct}: auto!important;
    }
    .#{$prop_sub}x-auto {
      #{$prop}-left: auto!important;
      #{$prop}-right: auto!important;
    }
    .#{$prop_sub}y-auto {
      #{$prop}-top: auto;
      #{$prop}-bottom: auto;
    }
    .#{$prop_sub}-auto {
      #{$prop}-top: auto!important;
      #{$prop}-bottom: auto!important;
      #{$prop}-left: auto!important;
      #{$prop}-right: auto!important;
    }
  }
}

app/assets/stylesheets/application.scss

@import 'spaces';

これでMaterializeでもあの便利なpadding/margin設定が利用可能に！

Trouble Shooting

1. Bootstrapをuninstallするとアクセスできなくなる

コンテナは起動しているのに、アクセスできない...
docker-compose.ymlのrailsアプリ用のコンテナの起動コマンドを

docker-compose.yml

command: rails s

から

docker-compose.yml

command: bundle exec rails s -p 3000 -b '0.0.0.0'

に変更したところ解決！詳しくは...わからない...