twitter-bootstrap-railsでbootswatchを使う

環境

• Ruby 2.0.0-p0
• Rails 4.0.0.beta1

手順

• rails プロジェクト作成

$ rails new rails-project
$ cd rails-project/

• twitter-bootstrap-rails のインストール

$ vim Gemfile

# To use twitter-bootstrap-rails (less)
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

$ bundle install
$ rails generate bootstrap:install less

• layout作成

$ rails g bootstrap:layout application fluid

• 試しにscaffoldでページを作る

$ rails g scaffold Post title:string description:text
$ rake db:migrate
$ rails g bootstrap:themed Posts

• デフォルトページ設定

$ vi config/routes.rb

- # root to: 'welcome#index'
+ root to: 'posts#index'

• rails server起動 (localhost:3000を確認)

$ rails s

• bootswatch のインストール
  • 例として cerulean を使っています

$ mkdir vendor/assets/stylesheets/bootswatch
$ wget -P vendor/assets/stylesheets/bootswatch http://bootswatch.com/cerulean/variables.less
$ wget -P vendor/assets/stylesheets/bootswatch http://bootswatch.com/cerulean/bootswatch.less

• app/assets/stylesheets/bootstrap_and_overrides.css.less でimportする

$ vi app/assets/stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
+ @import "bootswatch/variables.less";
+ @import "bootswatch/bootswatch.less";

• 確認
  • localhost:3000 にアクセスして http://bootswatch.com/cerulean/ と同じ配色になっていることを確認する

参考

• https://github.com/haman29/twitter-bootstrap-rails-bootswatch-sample
  • githubに上げました
• http://tkawachi.github.com/blog/2013/01/04/use-bootswatch-with-rails/
• https://github.com/seyhunak/twitter-bootstrap-rails