29 May 2013

Tailoring a RefineryCMS 2.0 project - Part 1

Background

I do technical support for a wonderful lady who designs websites for authors. About a year ago, we started collaborating together so that she could use RefineryCMS for her projects, instead of Radiant, Redmine, and other alternatives. We started when RefineryCMS was still at version 0.9, and have in fact migrated through several version changes, with v 1.0.9 being the last migration. Over the last year, we've put up about 14 websites.
I tailored RefineryCMS to her design preferences so that it would be easy for her to clone projects and build off of a stable design platform. I've added some settings so that she can easily choose between different choices: mastheads which stretch across the page, or which just fit in a centered container, for example.
The tailoring involves packaging together the following refinery engines: blog, news, inquiries, page-images, and mailchimp. We have standard sass-based stylesheets, which amply use SASS variables and mix-ins (macros), to make it easy to style. We have several jQuery plugins as well: for multi-level menus, lightbox display of images, banner rotator, quote revolver, etc.

This cheatsheet

This cheatsheet will record my work re-tailoring basic RefineryCMS 2.0 application to suit our needs.
It will cover my steps to integrate the various engines, stylesheets, jQuery plugins, etc and come up with a clone-able project template. By clone-able, I mean that she can just do a git clone <tailored_project> <new_project> and be off and styling in a matter of minutes.

Preparation

First, build a basic RefineryCMS 2.0 app (see following blog post) and get it up on Heroku's cedar stack. Come back here when you've got that working.

Add some engines:

Repeatable Process (recipe will show using refinerycms-settings as the example; see Gist of output):
  • add engine requirement to Gemfile:
        gem 'refinerycms-settings', '~> 2.0.0'
  • bundle install
  • rails g refinery:settings
  • rake db:migrate
  • rake db:seed
  • foreman start     ... check it out locally first
  • git add .; git commit -am 'added refinerycms-settings'; git push origin
  • git push heroku
  • heroku run rake db:migrate
  • heroku run rake db:seed
  • check it out with your browser pointed to http:my_project.herokuapp.com

refinerycms-settings

refinerycms-inquiries

refinerycms-blog

  -- you'll need to precompile the assets after rake db:seed and before push heroku
     $ RAILS_ENV=production bundle exec rake assets:precompile

refinerycms-news

  -- as of 05-Mar-12, your Gemfile line will need to be:
gem 'refinerycms-news', :git => 'git://github.com/resolve/refinerycms-news.git', :branch => "rails-3-1"

refinerycms-page-images

  -- as of 07-Mar-12, your Gemfile line will need to be:
gem 'refinerycms-page-images', :git => 'git://github.com/resolve/refinerycms-page-images.git', :branch => "rails-3-1"

MailChimp

  -- as of 07-Mar-12, this wouldn't initialize under RefineryCMS 2.0; will look into this later

refinerycms-stores

  -- you'll need to precompile the assets after rake db:seed and before push heroku
     $ RAILS_ENV=production bundle exec rake assets:precompile