RefineryCMS theming with Compass/Blueprint

[Alpha Sisyphus]

Hi,

I am new to RefineryCMS and Compass/Blueprint, but I'd like to get
RefineryCMS + Compass/Blueprint combination to work.

Is it possible? Any giudes whould be highly appreciated.

Thanks,
Alpha

[Daniel R]

Yes, you should be able to use Compass with RefineryCMS as with any
Rails 3 app.

I follow a specific approach to make it work with Refinery theming
system, here is how I do it.

1) Install compass gem on your system (no need to use the Gemfile):
> gem install compass

2) Install Refinery theming plugin on your rails app (using the
Gemfile & bundler) (https://github.com/resolve/refinerycms-theming),
follow the instructions.

3) go to the new folder "themes" under your app directory

4) now generate your compass-based theme:
> compass create newtheme
(replace "newtheme" by the name of your theme)

5) in the refinery admin, find the "theme" setting and change it to
the name of your new theme.

6) cd to your newtheme folder and type
> compass watch

7) now, you can work on your sass/scss files, compass will watch the
changes and generate the css files accordingly.

notes:
- you may have to rename the default sass file to something like
application.sass or theme.sass.
- I use this approach, as I use compass to generate the css files only
during development. I don't need compass on the production server, as
I upload the generated css. So no need to add compass to the Gemfile.

Hope it helps,

Daniel

[Philip Arndt]

You should put it in your Gemfile if you also want it to work when you deploy to production, right?

[Daniel R]

@Philip:

It depends on what you need:

1) Do you need to be able to alter the sass files on production, and
have compass compile the result automatically on page view ?

If yes, you'll need to add compass to the Gemfile, and you'll have to
use the "init rails" method:
> compass init rails -u blueprint/semantic
Now, your rails app knows about compass, and if you change your sass
files, the css will be updated automatically on the next http request.
It will work as well in development as in production.
The problem I had with this approach, is that it was then difficult to
switch refinery themes.

When you init compass for rails, it generates a compass.rb file under
the app's config directory.
Inside this file, paths are defined:
css_dir = "public/stylesheets/compiled"
sass_dir = "app/stylesheets"
If you want to be able to use it with the ability to switch refinery
themes, you'll have to do something like:
css_dir = "themes/" + RefinerySetting.find_by_name('theme') + "/css"
sass_dir = "themes/" + RefinerySetting.find_by_name('theme') + "/
sass"

I have not tested this approach, beacause I don't need to compile sass
files in production, and because I'm using Heroku, which is read-only.
So I took the simpler approach:


2) If you don't need to alter sass files on production, then there is
no need to have compass installed on production, so no need to add
compass to the Gemfile.

Here is my workflow:
> cd themes
> compass create mytheme -u blueprint/semantic
> cd mytheme
> compass watch

This will auto-compile the sass files during develoment, even if my
rails app knows nothing about compass.
When I want to deploy to production, as I use git, I just make sure
the compiled css files are checked in. Then I deploy as usual with a
git push.
In this approach, compass is just used as a tool to author stylesheets
during development. It feel more logical to me, for most situations.

You can easily create several, switchable themes without even touching
your app's config or Gemfile.

Daniel

[Philip Arndt]

Ok then I would put:

gem 'compass', :group => :development

:)

[Daniel R]

lol :)