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
-

執筆者:

関連記事

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

Rubyで静的ページをジェネレート〜middleman

静的ページのジェネレータとしてはjekyllやこれを使ったoctopressなどがメジャーなようで middlemanもそんな静的なページのメジャーなジェネレータの1つ middlemanの利点は次の …

Rails5.1でフォームをウィザード化〜wicked

By: Doll Joints – CC BY 2.0 目次1 gem wicked2 ウィザード用のコントローラーを作成する3 ルーティングの設定4 既存のコントローラーのcreateメ …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …