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サイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

backbone-relationalで関連するコレクションをRails3.2のAPIに投稿〜accepts_nested_attributes_for

By: Mike Baird – CC BY 2.0   backbonerelational.org/ Backbone-relationalを使って関連するコレクションをまと …

no image

Rails3.2でajaxなフォルダツリーを導入する4~dynatree-rails & Drag’n’Drop

wwwendt.de/tech/dynatree/doc/dynatree-doc.html wwwendt.de/tech/dynatree/doc/samples.html 今日はドラッグアンドド …

RailsでECサイト構築4 確認メールを送る~spree

  spreeでは注文したときと発送したときにメールを送信できるように設定できるので、やってみた   目次1 設定2 翻訳 設定 管理画面から設定>メールシステムの設定から これで …