2018年5月23日水曜日

Rails 5.xxでBootswatchを利用

前置き

製作中のWebサイトを、とりあえずいい感じのレイアウトにして、完成形のイメージにする為に、よく Bootstrap が使われています。
Bootswatch は Bootstrap のテーマで、やっぱりいい感じのレイアウトがまとまっています。
Screen Shot 2014-05-28 at 11.34.34.png
Screen Shot 2014-05-28 at 11.35.03.png
この中のテーマの1つを Rails 5で利用する方法をメモします。

Gemfile

gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'
gem 'execjs'
gem 'less-rails'

インストール

テーマを適応させます。
今回は lumen というテーマを選択しました。
テーマに関してはこちらから自由に選べます。
rails g bootswatch:install lumen
rails g bootswatch:import lumen
rails g bootswatch:layout lumen

Stylesheet

application.css を編集します。
lumen のところは選択したテーマ名を入力。
app/assets/stylesheet/application.css
/*
 *= require_self
 *= require lumen/loader
 *= require lumen/bootswatch
*/

Javascript

application.js を編集します。
lumen のところは選択したテーマ名を入力。
app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require lumen/loader
//= require lumen/bootswatch

使い方

以上で使えるようになると思います。
使い方としては、bootswatchのサイトから、各テーマのページに移って、そこに記載してあるパーツひとつひとつにマウスオーバーすると、コードが表示されるようになるので、それを利用したらいいかと思います。
Screen Shot 2014-05-28 at 11.50.59.png
Screen Shot 2014-05-28 at 11.51.07.png

詳細

その他、設定に関する詳細は、以下を見るといいかと思います。
https://github.com/scottvrosenthal/twitter-bootswatch-rails

参考

0 件のコメント:

コメントを投稿