New-Village

月間ブログ。だいたい1カ月に1回は更新しているようです。

bootstrap3-sassで一悶着

f:id:New-Village:20140811111158p:plain

rails tutorial をベースにdeviseを使ってログイン画面を作っているのだが、いくら頑張ってもテキストボックスが適切なサイズにならなくて、せっかくの週末を無駄にしてしまった。

bootstrapの公式サイトからGrid Systemのサンプルコードをコピペしても期待通りのレイアウトにならなかったので、railsでインストールしているbootstrapがおかしいのでは…と思い、gemfileを確認したら、rails tutorialでインストールしたbootstrap-sassはver.2で、bootstrapの公式サイトはver.3の解説をしていた。

bootstrap-sassのver.3もリリースされているようだったので、bootstrap-sassの入れ替えを行ってみた。

 

■ gemfileの書き換え

gemfile の太字の部分を修正した。

source 'https://rubygems.org'
ruby '2.1.1'
#Railsチュートリアル リスト3.1をベースとしている
#ruby-gemset=railstutorial_rails_4_0gem 'rails', '4.1.0'
gem 'bootstrap-sass', '~> 3.2'
# gem 'bootstrap-sass', '~>2.3'
gem 'sprockets', '~>2.11'

 そして、いつも通り適用して、railsサーバを起動してプレビューしてみると…

~/workspace/democritus(devise*)$ bundle install --without production
~/workspace/democritus(devise*)$ bundle update
~/workspace/democritus(devise*)$ rails s

以下のようなエラーが発生するようになった。

Undefined variable: "$grayLight".
(in /home/action/workspace/democritus/app/assets/stylesheets/custom.css.scss:51)

f:id:New-Village:20140811110827p:plain

 

■ エラー修正

"grayLight sass"でググると、bootstrap-sassのgithubのissuesが出てきたので、以下を参考に修正を行った。

After update to 3.0.0 - Undefined variable: "$grayLight". #463

custom.css.scss

@import "bootstrap";…h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
//  color: $grayLight;
  color: $gray-light;
}…footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
#  color: $grayLight;
  color: $gray-light;
  a {
    color: $gray;
        &:hover {
#          color: $grayDarker;
          color: $gray-darker;
        }
    }…

 でんででーん、でででん(東宝スパイダーマンの登場シーンのリズムで)

f:id:New-Village:20140811112542p:plain

 

■ ヘッダーの修正

classの内容がbootstrap2と3では変わっているらしいので、bootstrap公式サイトを参考にしてヘッダーを総取替えした。

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><%= link_to "Home", '#' %></li>
                <li><%= link_to "Help", '#' %></li>
                <li><%= link_to "Sign in", '#' %></li>
            </ul>
        </div> <!-- /. navbar-collapse -->
    </div> <!-- /. container -->
</header>

タイトルにnabvar-brandクラスを設定したのでCSSも修正した。よくわからないが、.navbar-brandのフォントカラーを白に設定しても適用されないので、"!important"を付けたら色が変更された。

app/assets/stylesheets/custom.css.scss

/* header */.navbar-brand {
  color: white !important;
  font-weight: bold;
  font-size: x-large;
  text-transform: uppercase;
  &:hover {
    color: white;
    text-decoration: none;
  }
}/ * #logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  line-height: 1;
  &:hover {
    color: white;
    text-decoration: none;
  }
} */

 こっそりログインボタンを修正しつつ、以下の通りに修正を行った。

f:id:New-Village:20140811131756p:plain

「ようこそ」の部分は、bootstrap3では、旧バージョンの".hero-unit"クラスが廃止されたのでおかしくなっている。ホームの該当箇所を代替クラスの"jumbotron"に修正する。

app/views/static_pages/home.html.erb

<div class="center jumbotron">
  <h1>ようこそ!Democritus へ</h1>  <h2>このアプリケーションは、Railsビギナーによるテスト用アプリケーションです。
  </h2>  <%= link_to "アカウントを作成", new_user_registration_path, class: "btn btn-primary btn-lg" %>
</div>

 フォントもおかしくなっているので、CSSを少し修正した。

$font-family-sans-serif: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
@import "bootstrap";

/* typography */

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  font-size: x-large;
}

 ようやくホームの修正が完了。

f:id:New-Village:20140811134430p:plain