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でOAuthを使うには~OmniAuth

By: Freenerd – CC BY 2.0   github.com/intridea/omniauth   目次1 OmniAuthの受け持つ役割2 Rails …

Rails3.2でみたまま編集 〜hallo editor

  By: Fabio Marini – CC BY 2.0 文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit 文字をダブルクリックしてその …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

no image

Rails4とPostreSQL9.3で全文検索〜pg_bigm

目次1 準備2 migration3  使い方 準備 エクステンションを導入しておく Ubuntu Server12.04でPostgreSQL9.3をつかう〜pg_bigmで全文検索 migrati …