Reno, NV    +1 (800)0 621-0871

Go back

Development | Ruby on Rails | Web Design

Rails for Designers – Using Haml/Sass for all projects

  |  December 29, 2008

I have recently acquired a newfound drive for designing sites(as opposed to my earlier desire to be a great design/backend mediator). As of now, due to some reent developments, I am the main designer for most of our projects, not to mention some of which are personal or freelance related. One pet peeve I had though was the diversity of my projects: meaning some were in rails(of course I was happy with fixing views and adding some javascript-fu), php, and some, just plain XHTML/CSS.

With that said, things can get pretty messy when multiple projects are at hand and I have to shift continually from regular XHTML/CSS coding and HAML/SASS. Though it is not a great hindrance, having to keep remembering which language I was using was kinda annoying. Add to the fact that I work twice(or thrice) as fast using HAML/SASS and the tiny nuisance becomes a glaring problem(for me that is).

At first, I made a semi-solution. A compromise of sorts: since I use the ever cool Elements CSS framework(actually I just use the general html structure and a modified reset.css which I have discussed with the author, Ben Henschel), my html is usually almost ready-made so my usual focus is just the css file. For projects that used Rails(I still didn’t have a solution for ones that didn’t) but not Haml, I just installed Haml on my part, and continued developing with Sass. Since Sass generates a .css file, that’s the one I usually push in repos(if the client can’t be bothered with installing Haml).

But that was just for Rails projects. The problem lies with normal design projects or ones that used PHP. Recently, I had another solution(I doubt this is the most efficient though): make a blank rails app and keep using Haml/Sass for myself and when done with coding the design, I just do a view source, copy-paste the whole thing in a blank html file, modify the paths for the css and javascripts, then just copy the images/stylesheets/javascripts folders in my public/ folder. Nifty!

It was a good thing for me, since now, I can just keep coding in Haml and Sass to my heart’s content. Thing is, I just realized I just can’t keep making blank rails apps for each project! So the plan was to separate the projects in self-titled folders and just use some routes.rb and controller magic suggested by my friend Greg:

In routes.rb:

map.connect 'projects/:id', :controller => 'projects', :action => 'index'

and in my single controller named projects_controller.rb:

def index
render :action => "#{params[:id]}/index"
end

With that, I can just go to say /projects/projectA and it will then render projectA. This also works as a portfolio and future-reference of sorts for me, which is excellent. Now I only need to think of a good way to organize the images and the stylesheets(especially the javascripts) so they won’t interfere with each other but basically, I’m just planning to put them in separate folders too(except for reset.css and jquery.js of course – every project needs that!)

Extra note: Forgot to mention that I had to add

config.frameworks -= [ :active_record, :active_resource, :action_mailer ]

since I wasn’t using any db.