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
-

執筆者:

関連記事

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …

no image

RailsでGoogle Mapを使ってみる~Google-Maps-for-Rails

github.com/apneadiving/Google-Maps-for-Rails   前提

こんな感じで perso …

no image

RubyでDocxを分解してみた~Nokogiri::XML::SAX

    参照 Rubyでdocxをいろいろ分析してみた 今度はsaxのアプローチでdocxのword/document.xmlを分解してみた 使い方は、Nokogiri::XML: …

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

By: the Italian voice 目次1 Best in place2 Mercury editor3 create.js4 スクラッチで5 X-editable Best in place …