管理画面を作るにあたって bootstrapだけで1から作るのもしんどかったので、フリーのbootstrap用テンプレート bootswatchを使って管理画面を作ってみたいと思います。

導入には以下4パターンがあるかと思います。

1. bootswatch-railsなどのGemを使う
2. bowerで入れる
3. rails-assetsで入れる
4. サイトからダウンロードしてassets下に配置する

今回はrails-assetsで導入してみました。

Rails Assetsで検索するといくつか候補が出てきます。
今回はrails-assets-bootswatch-sassを使ってみます

1
2
3
4

source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-sass-official'
  gem 'rails-assets-bootswatch-sass'
end

そしてapplication.cssをapplication.css.scssにリネームして以下を追加です。

1
2
3
4
5
6

$icon-font-path: "bootstrap-sass-official/";

@import "bootstrap-sass-official";
@import "bootswatch-sass/flatly/variables";
@import "bootswatch-sass/flatly/bootswatch";
@import "bootswatch-sass/flatly/bootstrap";

これでサイトがbootswatchのテーマが適用された状態(今回はフラットデザインのflatlyを選びました)となります。 簡単ですね。