Refinery’s Getting Started guide proceeds by telling you how to start overriding views for your pages - but first, let’s see what I can do just with CSS. First, what is the structure of the basic page?

    <div id="page_container">
      <header>
        <h1 id='logo'><a href="/">Site Name</a></h1>
        <nav id='menu' class='menu clearfix'>
          <ul>
            <li class='selected first' id='item_0'><a href="/">Home</a></li>
            <li class='last' id='item_1'><a href="/about">About</a></li>
          </ul>
        </nav>
      </header>
      <section id='page'>
        <section id='body_content'>
          <h1 id='body_content_title'>Home</h1>
          <section id='body_content_left'>
            <div class='inner'>
              <p>
                Welcome to our site. This is just a place holder page while we gather our content.
              </p>
            </div>
          </section>
          <section id='body_content_right'>
            <div class='inner'>
              <p>
                This is another block of content over here.
              </p>
            </div>
          </section>
        </section>
      </section>
      <footer>
        <p>Copyright © 2011 Site Name</p>
      </footer>
    </div>

That’s a pretty nice structure. There are some HTML5 semantic tags - header, footer, section. The entire thing is wrapped into a div with the id page_container. Content sections are delimited with sections and divs with ids that should make it pretty easy to pick them out with CSS selectors. The navigation is an unordered list that should be easy to style into a list or a set of tabs. The out of the box page is plain black and white but is laid out with two columns side by side. So there must be some styling coming from somewhere. Let’s look in the normal place for rails stylesheets: $RAILS_ROOT/public/stylesheets/. The generator created 4 files in that directory: application.css formatting.css home.css theme.css Very nice - but all they have are comments in them saying how they should be used. For example, application.css should be used to override front end styles while formatting.css will be included in the front end styles AND in the WYSIWYG editor on the back end. That sounds like a nice structure. But so far, I don’t see actual CSS. Looking more closely, I see we are including styles from /stylesheets/refinery/application.css. Where is that coming from? Ahhh that comes from the refinery-core gem which, being an engine, has a full rails application structure within the gem. The public/stylesheets directory inside that gem is where all the backend styling is coming from - as well as this one refinery/application.css file.

Interesting. But can I change things? Yup. If I edit the application.css file in my public/stylesheets/application.css directory, I can affect the look if the site. I can set backgrounds, override column widths, etc. The guide even provides a very basic set of tabbed navigation. So, for the sites where I already have a design, it is a pretty straightforward matter of converting their styles into CSS that matches the default page structure for the RefineryCMS pages. If I had a particularly complicated design, I could override the RefineryCMS views to fit with my CSS. But in the first instance, the site I am converting uses a series of nested tables , so changing the layout to something more modern is a good idea anyway.

Refinery also claims to support SASS stylesheets - there is even a section in the getting started guide specifically about stylesheets. However after some confusion about where to place the code in that guide, I discovered I really didn’t need it - at least in development mode. All I needed to do was add gem 'sass' to my Gemfile and rerun bundle install. Some deep Rails magic automatically recompiles my SASS templates at each page load which made modifying the design pretty fast. However, I am still struggling to figure out how to make this work out in production mode.