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

11973 ワード
Railsチュートリアル CSS Bulma Rails5 CSS テキストリンク

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

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

  • UIkit
  • Materialize
  • Foundation
  • Semantic UI
  • Bulma

導入手順

Gemfileに以下を追記

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

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

// @import "bootstrap";
@import "bulma";

サーバーを立ち上げて画面を確認。

$gray-lightが定義されていないらしい
元々bootstrapのLESS変数だったので参照できなくなった模様
（詳しくは第５章の5.2.2参照）

bulmaのcolorsページを参考に$gray-lightに書き換える

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

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

画面を確認

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

まず、ヘッダー
app/views/layouts/_header.html.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>

次に中央部分
app/views/static_pages/home.html.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 %>

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

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