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/ と同じ配色になっていることを確認する