Rails(4.0.3)Ruby(2.1.1)twitter-bootswatch-rails(3.1.1.0)でデモサイト作成


App作成
---
```
$ rails new twitter-bootswatch-rails-demo
```
Version確認
---
```
$ ruby -v
ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin13.0]
```
```
$ bundle
・・・・
 rails (4.0.3)
 haml (4.0.5)
 haml-rails (0.5.3)
 twitter-bootswatch-rails (3.1.1.0)
 twitter-bootswatch-rails-fontawesome (4.0.3.0)
 twitter-bootswatch-rails-helpers (3.1.0.0)
・・・
```

 twitter-bootswatch-railsをインストール
---

```
rails g bootswatch:install [任意]
```

ex:)システム管理画面とユーザー画面みたいなの
```
$ rails g bootswatch:install admin
$ rails g bootswatch:install storefront
```

app/assets/javascripts/
app/assets/stylesheets/
配下が作られます:)ここからadminとstorefrontを例に作っていきます。

layoutを作成
---
```
$ rails g bootswatch:layout admin
$ rails g bootswatch:layout storefront
```

app/views/layouts/
配下が作られます:)


簡単な機能をscaffoldで作成する
---
```
 $ rails g scaffold Post title:string description:text
 $ rake db:migrate
 $ rails g bootswatch:themed Posts
```

ベースが出来たところで、ここからbootswatchのテーマをインポート ex:)flatly利用
---
```
$ rails g bootswatch:install flatly
 app/assets/javascripts/flatly*
 app/assets/stylesheets/flatly*
```

bootswatchよりDownload
---
```
$ rails g bootswatch:import flatly
```
 `/variables.less` と `/bootswatch.css.less` が追加されます。

layout追加
---
```
 $ rails g bootswatch:layout flatly
  app/views/layouts/flatly.html.haml
```

flatlyを見るようにlayout指定
---
```
 $ vim app/controllers/application_controller.rb 
 $ git diff
 diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
 index d83690e..453eb0e 100644
 --- a/app/controllers/application_controller.rb
 +++ b/app/controllers/application_controller.rb
 @@ -2,4 +2,5 @@ class ApplicationController < ActionController::Base
    # Prevent CSRF attacks by raising an exception.
    # For APIs, you may want to use :null_session instead.
    protect_from_forgery with: :exception
 +  layout 'flatly'
  end
```

admin側も設定する
---
```
 $ rails g bootswatch:install admin
 $ rails g bootswatch:import admin/cyborg
 $ rails g bootswatch:layout admin
```
特にここ以外で触れないので、読み飛ばして大丈夫です;)

この時点で確認してみる
---
```
$ vim config/routes.rb 
$ git diff
diff --git a/config/routes.rb b/config/routes.rb
index cf9d111..903d70c 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -5,7 +5,7 @@ TwitterBootswatchRailsDemo::Application.routes.draw do
   # See how all your routes lay out with "rake routes".
 
   # You can have the root of your site routed with "root"
-  # root 'welcome#index'
+   root 'posts#index'
 
   # Example of regular route:
   #   get 'products/:id' => 'catalog#view'
```
```
$ rails s
```
ブラウザで確認すると反映されています:)

Use less
---
```
$ vim app/assets/stylesheets/application.css
$ git diff
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e6d8b10..874c6e8 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -9,5 +9,7 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
+ *= require flatly/loader
+ *= require flatly/bootswatch
  *
  */
```

Using Javascripts
---
```
 $ vim app/assets/javascripts/application.js
 $ git diff
 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
 index c37b172..c2c8567 100644
 --- a/app/assets/javascripts/application.js
 +++ b/app/assets/javascripts/application.js
 @@ -13,4 +13,5 @@
  //= require jquery
  //= require jquery_ujs
  //= require turbolinks
 -
 +//= require flatly/loader
 +//= require flatly/bootswatch
```

Github
---
[今回作ったもの](https://github.com/koudaiii/twitter-bootswatch-rails-demo)

App
---
[demo](http://twitter-bootswatch-rails-demo.herokuapp.com/)

参考
----
[Github:twitter-bootswatch-rails](https://github.com/scottvrosenthal/twitter-bootswatch-rails)
[bootswatch](http://bootswatch.com/)
[Github:twitter-bootswatch-rails-demo](https://github.com/scottvrosenthal/twitter-bootswatch-rails-demo)