Everybody, who has ever tried, knows how difficult it is to design fluid layouts. Designers and others don’t make it easier. But todays computers do not allow to ignore the screen size and deliver just one fixed layout. The minimum would be to build two or three static sizes:

  1. one for mobile devices: something about 300px in width, but this is just a guess. iPhone might improve this issue.
  2. one for regular screens – 1024 x 768. Works on small (widescreen) notebooks and most other elderly monitors
  3. one for the large ones, that never heard of leaving the full screen. We decided to go for 1280 x 1024

This leads to the problem, that graphics have to scale to certain sizes, margins and paddings should grow and the font-size has to be reviewed. One could argue, that just a redefinion of the font size within the body should be sufficent. But nobody wants to enlarge every tiny bit.

So you have to deliver different stylesheets for every supported size. While there are several possibilties, they all have certain drawbacks.

  1. Separate the different css files completely: While writing the styles, this comes handy, you have all definitions that influence the view at hand. No side effects,you didn’t recognize. But when maintaining the code, adding new UI elements, this becomes dirty. You will inevitably loose changes in the one or the other way and you have to synchronize the styles manually.
  2. Have a default style sheet and redefine the changes in another one: This solves the synchronizing issue, mainly. But the definition of the derived style gets pretty difficult. There is no way to recognize unintended side effects, when editing the default style.
  3. Have a basic style sheet and define the size-related statements in other files: What should that be good for, except bandwidth concerns.
  4. and finally: Define everything in place, use one stylesheet to rule them all. Introduce variables to compute the needed sizes or add control structures to get the correct results.

But wait – there is no such thing like variables or control structures in Cascading Stylesheets. But they are there in Ruby and in Erb, so why shouldn’t we combine them, as we do in HTML?

Rails makes everything handy from now on. Others ( Dirt simple .rcss templates, Dynamic CSS in Ruby on Rails) have already described, how to add rcss to your Rails environment. There is even a Gem at Rubyforge, which may be included easily. We have made our own contribution, specific to our needs.

Building rcss templates in Rails

Add the following to your config/routes.rb

map.connect 'rcss/:rcss', :controller => 'rcss', :action => 'dispatch'

In Rails 1.2.1 which has been released recently, the configuration of Routes as been changed significantly. It is said to be more powerful and faster. For our configuration we need only small changes. Add the following line if you are using the lastest Rails:

map.connect 'rcss/:rcss.:format', :controller => 'rcss', :action => 'dispatch'

Generate a controller to handle your generated stylesheets.

script/generate controller rcss

And fill it with contents.

class RcssController < ApplicationController
  layout nil
  session :off

  def dispatch
    if rcss = params[:rcss] and
       action_name = rcss.gsub(/\.r?css$/i, '').to_sym and
       respond_to?( action_name )
        file_path = send( action_name )
        render :file => file_path, :content_type => "text/css"
    else
      render(:nothing => true, :status => 404)
    end
  end

For every style sheet you would like to use with your HTML add a method named after it. So style.css or style.rcss if you like would become

  def style
    @custom_variable = true # May be used within the style sheet
    "#{RAILS_ROOT}/app/views/rcss/style.rcss"
  end

with the corresponding rcss template

<% if @custom_variable %>
   body * { background-color: green; } 
<% else %>
   body * { background-color: yellow; } 
<% end %>

Now you are able to keep all the definitions in one place. You may recognize all dependencies and react correctly.

Further topics:

  1. What does that mean for caching?
  2. How do we activate the different styles on the client side to adopt to different screen resolutions?
Advertisements