Rails의 sample_app를 조금 현대적으로 만들어 보았습니다.

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장의 5.2.2 참조)

bulma colors 페이지 을 참고로 $gray-light
유사한 절차를 사용하여 $gray


다음은 $gray-darker 클래스가 발견되지 않으면 화난다.$gray-lighter는 bootstrap의 CSS 클래스이므로 이것을 Bulma의 $state-danger-text로 바꿉니다.

화면 확인


에러가 없어졌지만, 외형이 이상하게 되어 있다. 하나씩 고친다.

첫째, 헤더$grey

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

다음 중앙부$grey-darker

<% 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과 같이 클래스 지정만으로 여러가지 파트를 장식할 수 있으므로, 여러가지 시험해 가고 싶다.