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
https://bulma.io/documentation/components/navbar/
<headerclass="navbar is-dark is-fixed-top"role="navigation"aria-label="main navigation"><divclass="container"><divclass="navbar-brand"><%=link_to"sample app",root_path,id: "logo",class: "navbar-item"%></div><divid="navbarBasicExample"class="navbar-menu"><divclass="navbar-end"><%=link_to"Home",root_path,class: "navbar-item"%><%=link_to"Help",help_path,class: "navbar-item"%><%iflogged_in?%><%=link_to"Users",users_path,class: "navbar-item"%><divclass="navbar-item has-dropdown is-hoverable"><aclass="navbar-link">
Account
</a><divclass="navbar-dropdown"><%=link_to"Profile",current_user,class: "navbar-item"%><%=link_to"Settings",edit_user_path(current_user),class: "navbar-item"%><hrclass="navbar-divider"><%=link_to"Log out",logout_path,method: :delete,class: "navbar-item"%></div></div><%else%><divclass="buttons"><%=link_to"Log in",login_path,class: "button is-primary"%></div><%end%></div></div></div></header>
次に中央部分app/views/static_pages/home.html.erb
<%iflogged_in?%><divclass="row"><asideclass="col-md-4"><sectionclass="user_info"><%=render'shared/user_info'%></section><sectionclass="stats"><%=render'shared/stats'%></section><sectionclass="micropost_form"><%=render'shared/micropost_form'%></section></aside><divclass="col-md-8"><h3>Micropost Feed</h3><%=render'shared/feed'%></div></div><%else%><sectionclass="hero is-light is-fullheight-with-navbar is-bold"><divclass="hero-body"><divclass="container"><h1class="title is-1">
Welcome to the Sample App
</h1><h2class="subtitle">
This is the home page for the
<ahref="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
sample application.
</h2><pclass="has-text-centered"><%=link_to"Sign up now!",signup_path,class: "button is-primary is-large"%></p></div></div></section><%=link_toimage_tag("rails.png",alt: "Rails logo"),'http://rubyonrails.org/'%><%end%>
見た目が復旧した。
ここからは割愛するが、他の画面も地道に直していきました。
bulmaは公式サイトがわかりやすく、
bootstrap同様、クラス指定だけでいろいろなパーツを装飾できるので、いろいろ試していきたい。