Edited at

Rails4 で Gem を使わずに Gumby Framework をセットアップする

More than 3 years have passed since last update.


概要

Rails4 で Gem を使わずに CSS Framework の1つである「Gumby」をセットアップする手順です。


そもそもなぜ Gem を使わないのか

最新版を使いたいから。

また公式で Gem を提供していないため、公式の API ドキュメントと実際に Gem でセットアップした時の手順に差異があり、それによってうまく動作しない箇所があるから。


前提

公式サイトから Gumby Framework をダウンロードします。カスタマイズが必要な場合でもデフォルトの場合でも以降の手順に違いはありません。


手順


1. ファイルを配置する


  • ダウンロードした Gumby-master.zip を解凍します。

  • Rails 側の展開先は基本的に #{Rails.root}/vendor/assets/ 配下とします。


  • Gumby-master/css/*#{Rails.root}/vendor/assets/stylesheets/ へ。


  • Gumby-master/js/*#{Rails.root}/vendor/assets/javascripts/ へ。

  • 例外として Gumby-master/fonts/icons/*#{Rails.root}/public/fonts/icons/ へ。

  • 例外として Gumby-master/img/gumby_mainlogo.png#{Rails.root}/app/assets/images/ へ。


  • #{Rails.root}/vendor/assets/ 配下は以下のような配置になります。

  


2. 各ファイルを編集する


  • 必要でないコメントは省略しています。


#{Rails.root}/app/assets/javascripts/application.js

//= require jquery

//= require jquery_ujs
//= require turbolinks
//= require libs/modernizr-2.6.2.min.js // add
//= require libs/gumby.min.js // add
//= require libs/ui/gumby.navbar.js // add (if required)
//= require_tree .


#{Rails.root}/app/assets/stylesheets/application.css

 *= require_tree .

*= require gumby.css /* add */
*= require_self


  • 個人的な好みにより haml で書いています。適時置き換えて下さい。


#{Rails.root}/app/views/layouts/application.html.haml

!!!

%html
%head
%title Your Awesome App
%meta{name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1'}
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%body
%div{class: 'navbar', id: 'nav1'}
%a{class: 'toggle', 'gumby-trigger' => '#nav1 > ul'.html_safe, href: '#'}
%i{class: 'icon-menu'}
%h1{class: 'four columns logo'}
%a{href: '#'}
%img{src: asset_path('gumby_mainlogo.png'), 'gumby-retina' => true}
%ul{class: 'eight columns'}
%li
%a{href: '#'} MENU
%div{class: 'dropdown'}
%ul
%li
%a{href: '#'} MENU 1
%li
%a{href: '#'} MENU 2
%li
%a{href: '#'} MENU 3
%div{class: 'row'}
%div{class: 'twelve columns'}
= yield


3. 確認

表示を確認します。


Console

$ bundle exec rails g controller dashboard index



#{Rails.root}/config/routes.rb

Rails.application.routes.draw do

# get 'dashboard/index'
root 'dashboard#index'
end


Console

$ bundle exec rails s


このような感じになったら成功です。


トラブルシューティング


  • スマホで見た時(≒ブラウザの横幅を縮めた時)に表示されるメニューアイコンが文字化けする

こんな感じになることがあります。

#{Rails.root}/vendor/assets/stylesheets/gumby.css の content 指定を以下のようにすることで直ります。


#{Rails.root}/vendor/assets/stylesheets/gumby.css

/* 89行目あたり */

/* '\\2630' を '\2630' にする */
.icon-menu.icon-left a:before, .icon-menu.icon-right a:after, i.icon-menu:before { content: '\2630' /*'\\2630'*/; height: inherit; }

問題なければ以下のようになります。


補足

Gem も公式が配布するようにして欲しい。

その他不明な箇所がありましたらコメントでお寄せ下さい。