moo the blog

Refinery CMS and Zurb Foundation 5

I’ve dabbled with RefineryCMS over the past few days in order to quickly setup a site. I thought it would be a good opportunity to play with Foundation as well.

Since Foundation 5 was just released, I didn’t find much documentation on how to integrate the two. Therefore, I’ve decided to share a small part of my findings.

In specific, the GitHub repository refinery-foundation demonstrates how to implement a Refinery drop-down menu with a Foundation front-end.

It seemed like a partially answered question on StackOverflow. The Flatiron School blog post was helpful but not complete either. So checkout the repository and see the commit-by-commit process or continue reading for a summary.

Caveat: As per comments below, this procedure has been verified with Rails 3.2.16, not Rails 4.

1. Install the refinerycms gem:

   cd ~/Sites
   gem install refinerycms

2. Create the Rails app:

   refinerycms refinery-foundation
   cd refinery-foundation

3. Add the foundation-rails gem to the Gemfile:

   group :assets do
     gem 'foundation-rails'
   end

4. Install the gem and run the foundation generator:

   bundle install
   rails g foundation:install

5. Add the Zurb menu presenter and helper:

   • app/helpers/application_helper.rb
   • app/presenters/refinery/pages/zurb_menu_presenter.rb

6. Override the key Refinery files:

   rake refinery:override view=layouts/application
   rake refinery:override view=refinery/_head

7. Tweak the overrides:

   • app/views/layouts/application.html.erb
   • app/views/refinery/_head.html.erb
   • app/views/refinery/_header.html.erb

8. Tweak the CSS:

   // RefineryCMS Customization
   header {
   }
   #page {
     @include grid-row();
     #body {
       @include grid-column(9);
     }
     .no_side_body #body {
       @include grid-column(12);
     }
     #side_body {
       @include grid-column(3);
     }
   }
   footer {
   }
   .top-bar {
     .title-area { z-index: 2; }
   }

The result as shown in the image below doesn’t look like much, but it’s there: Zurb Foundation 5 running on Refinery CMS.