Railsで使えるGem

Refinery CMS3.0にBootstrap3.1を適用する

投稿日:

screenshot

Gemfile

公式の最新版は3.2だけど、pathの設定がおかしいらしくJavascriptsやFontsがうまく探せずに諦めたorz

3.1.1のドキュメントはここ

Sprocketを設定

style.css.scss

公式では、application.css.scssを作って、application.cssは削除すると書いてあるけどうまくいかないので、適当なscssファイルを作成する.

application.js

一応、jqueryの読み込みより後に.

application.htmlをoverrideする

rake タスク

単に、rake refinery:overrideで、overrideするファイルの指定の仕方のサンプルが表示される.

application.html.erbをoverrideする

Grid Layout

Blogのshow.html.erbをみると各要素がsectionタグになっていることがわかる.
レイアウト関係はdivタグを使うべきぽいので、divタグでsection要素をdivタグで囲んでレイアウトを設定する.
あと、sectionタグはH1~要素を含んでいないといけないみたい.

Navbar

複数階層のない単純なNavbarを設置した.
Refineryでは、メニューをMenuPresenterで出力しているので、application.html.erbで書けない部分は次のようにして変更した.

そして、application_helperに、render_header_menuを定義する.

screenshot

ドロップダウンメニューを使うにはMenuPresenter自体をoverrideしないとダメぽい.

Panel

選択済みのli要素にactiveクラスをつける

screenshot

Well

footerタグにwellクラスをつけた.

screenshot

できた

screenshot

今回の記事では、Bootstrapの設定については、次の書籍をだいぶ参考にしました.

-Railsで使えるGem
-

執筆者:

関連記事

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …