Railsのsample_appを少しだけモダンにしてみた

[Railsチュートリアル](https://railstutorial.jp/)でsample_appを作れるようになったものの、bootstrap感満載の見た目なので、別のCSSフレームワークに変えてみた。

CSSフレームワークは以下が候補だったが、使うのが簡単そうで人気も高いらしいBulmaをなんとなく選んでみた。

- UIkit
- Materialize
- Foundation
- Semantic UI
- Bulma

## 導入手順
`Gemfile`に以下を追記

```
gem "bulma-rails", "~> 0.8.0"
```

`app/assets/stylesheets/custom.scss`を以下のように修正

```scss
// @import "bootstrap";
@import "bulma";
```

サーバーを立ち上げて画面を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77606/c9bd1d2b-f43c-265a-65ff-f6763784c800.png)

`$gray-light`が定義されていないらしい
元々bootstrapのLESS変数だったので参照できなくなった模様
（詳しくは第５章の[5.2.2](https://railstutorial.jp/chapters/filling_in_the_layout?version=5.1#cha-filling_in_the_layout)参照）

bulmaの[colorsページ](https://bulma.io/documentation/overview/colors/)を参考に`$gray-light`に書き換える

同様の手順で`$gray`,`$gray-darker`,`$gray-lighter`,`$state-danger-text`も`$grey`,`$grey-darker`,`$grey-lighter`,`$danger`に書き換える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77606/26ab45d7-30e7-d7f1-d8db-2e85807f2907.png)

次は`has-error`クラスが見つからないと怒られる。
`.has-error`はbootstrapのCSSクラスなのでこれをBulmaの`is-danger`に差し替える

画面を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77606/8994beb4-a6dd-1a75-ba03-798ff3a7c70b.png)

エラーがなくなったが、見た目がおかしなことになっている。一つずつ直す。

まず、ヘッダー
`app/views/layouts/_header.html.erb`

https://bulma.io/documentation/components/navbar/

```erb
<header class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
  <div class="container">
    <div class="navbar-brand">
      <%= link_to "sample app", root_path, id: "logo", class: "navbar-item"%>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-end">
        <%= link_to "Home", root_path, class: "navbar-item"%>
        <%= link_to "Help", help_path, class: "navbar-item"%>
        <% if logged_in? %>
          <%= link_to "Users", users_path, class: "navbar-item"%>

          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              Account
            </a>
            <div class="navbar-dropdown">
              <%= link_to "Profile", current_user, class: "navbar-item"%>
              <%= link_to "Settings", edit_user_path(current_user), class: "navbar-item"%>
              <hr class="navbar-divider">
              <%= link_to "Log out", logout_path, method: :delete, class: "navbar-item"%>
            </div>
          </div>
        <% else %>
          <div class="buttons">
            <%= link_to "Log in", login_path, class: "button is-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</header>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77606/c7e66fbf-5094-a763-8a53-d5e29206c7df.png)

次に中央部分
`app/views/static_pages/home.html.erb`

```erb
<% if logged_in? %>
  <div class="row">
    <aside class="col-md-4">
      <section class="user_info">
        <%= render 'shared/user_info' %>
      </section>
      <section class="stats">
        <%= render 'shared/stats' %>
      </section>
      <section class="micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
    <div class="col-md-8">
      <h3>Micropost Feed</h3>
      <%= render 'shared/feed' %>
    </div>
  </div>
<% else %>
<section class="hero is-light is-fullheight-with-navbar is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-1">
        Welcome to the Sample App
      </h1>
      <h2 class="subtitle">
        This is the home page for the
        <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
        sample application.
      </h2>

      <p class="has-text-centered">
        <%= link_to "Sign up now!", signup_path, class: "button is-primary is-large" %>
      </p>
    </div>
  </div>
</section>

<%= link_to image_tag("rails.png", alt: "Rails logo"),
              'http://rubyonrails.org/' %>
<% end %>

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/77606/2d7df4db-3d0d-0e8d-cada-aeba99e12924.png)

見た目が復旧した。
ここからは割愛するが、他の画面も地道に直していきました。

bulmaは公式サイトがわかりやすく、
bootstrap同様、クラス指定だけでいろいろなパーツを装飾できるので、いろいろ試していきたい。