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

今回作ったもの

App

demo

参考

Github:twitter-bootswatch-rails
bootswatch
Github:twitter-bootswatch-rails-demo