twitter-bootstrap-rails ではなく bootswatch-rails で Bootswatch を簡単に組み込む

maxim/bootswatch-rails を使うと Bootswatch を簡単に組み込むことができる。

もう一つの定番、twitter-bootstrap-rails よりテーマのダウンロードが不要だったりと楽。

Gemfile

Gemfile に下記を追加。

gem 'autoprefixer-rails'
gem 'bootstrap-sass'
gem 'bootswatch-rails'

インストール。

$ bundle

application.css.scss

bootswatch-rails は SCSS を使うため、既存の application.css を application.css.sccs に改名。

$ mv ./app/assets/stylesheets/application.css ./app/assets/stylesheets/application.css.scss

application.css.scss の変更は二点。

1. 冒頭にある *= require_tree と *= require_self は使わないので削除 ( あるとデザインが狂う )
2. Bootswatch のテーマを記述 ( ここでは cosmo を利用 )

/*
(略)
  *= require_tree .  # 削除
  *= require_self    # 削除
  */

@import "bootswatch/cosmo/variables";

@import "bootstrap";

body { padding-top: 60px; }

@import "bootswatch/cosmo/bootswatch";

body { padding-top: 60px; } は Bootstrap の Navbar を使った時に、コンテンツが Navbar の下に隠れないようにする設定。

application.html.erb

./app/views/layouts/application.html.erb の yield を Bootstrap の container クラスで挟む。これでデザインが反映される。

  <div class="container">
<%= yield %>
  </div>

サーバの再起動

application.* 系のファイルは Rails サーバを再起動しないと反映されないので、再起動。