Posted at

リッチ系CSSフレームワークGumby を Rails 4 で動かす方法

More than 5 years have passed since last update.

レスポンシブな HTML/CSS の組み方を勉強するために、Gumby という CSSフレームワークを使ってみたのですが、

Rails で使っている記事があまり見当たらず、動かすまでに少し戸惑ったので、手順をメモしておきます。

今回は、現行のバージョンである Gumby framework 2 を、Rails 4.1.1 の環境で動かしました。


Gumby framework とは

Gumby framework は、いわゆる Twitter Bootstrap と同じような機能を持った、Sass 製のレスポンシブな CSS フレームワークです。

スクリーンショット_2014-07-28_19_33_32.png

特徴としては、

・フレキシブルなグリッドレイアウト

・トグル機能で簡単に、交互に表示/非表示の切り替えができる

・表示する画面サイズによって、要素の位置(DOM構造)をシャッフルできる

・表示する画面サイズによって、画像を別々にロードできる

・デザインのカスタマイズが可能

などがあります。

詳しくは、Gumby framework の公式サイト をご覧ください。

==

ざっくり Twitter Bootstrap との UI デザインの違いを比べるには、こちらのURLを見るのがいいと思います。

Gumby 2 UI Kit

http://gumbyframework.com/docs/ui-kit/

Twitter Bootstrap 3 UI

http://getbootstrap.com/examples/theme/


gem を使って Gumby を入れる

まず、gumby を Rails で使うための gem を検討しました。

「gumby」で検索すると、いくつか出てきます。

スクリーンショット_2014-07-25_14_31_26.png

GitHub の README を読んでみたり、それぞれの gem を実際に使ってみたりしましたが、

gumby gem というのが、README に設定方法も詳しく書かれていてわかりやすかったので、今回はこの gem を使いました。

https://github.com/afnecors/gumby


インストール手順

Gemfile に以下のように書き込んで、gem をインストールします。

gem 'gumby'

gem 'jquery-rails'
gem 'modernizr-rails'

書けたら、bundle install します。

$ bundle install --path vendor/bundle

次に、Modernizr を使えるように、 app/assets/javascripts/application.js ファイルに以下を追記します。


app/assets/javascripts/application.js

//= require modernizr


Modernizr は、gem で入れなくても、ファイルを直接 app/assets/javascripts 以下に置く形でも簡単に読み込めます。

その場合は、 app/assets/javascripts/application.js の中に、


app/assets/javascripts/application.js

//= require modernizr-2.6.2.min


という感じに書いておきます。

最後に、スタイルシートの読み込みです。

app/assets/stylesheets/application.css の中で、

Gumby を使えるように宣言します。


app/assets/stylesheets/application.css


*= require gumby

これで、設定は完了です。

Rails Server を起動します。

$ bundle exec rails s

スクリーンショット_2014-07-28_19_31_28.png

これで、Gumby が動いてくれました!