Ruby on Rails for Designers: Getting Stylish with ERB

I just spent a week working with my friends at Highgroove studios — boom! — on one of their projects, and I learned a lot that I’d like to share. This is my second experience with design for rails and I’m slowly getting a grasp on how people who do that type of work operate. Hopefully some other non-programmer types will find this helpful.

I’ve only used the ERB (Embedded Ruby Templating) package so far, so I’ll concentrate on that.

First check out the official guide on layouts and rendering here:

Also let me direct your attention to this guide on installing rails on Nettuts. It says it is for designers, but it looks like an install guide for sysadmins. If all that text frightens you as much as it does me, let me just go ahead and tell you that you’re going to be doing a lot of command line work.

Obviously, the best possible answer to this problem is to hire someone to do the text editing for you so you can concentrate on things like horn-rimmed glasses and the Helvetica typeface, but sometimes you just have to get your hands dirty your own self.

If you’re down with the CLI — yeah you know I, uh.. am! –then let’s move on.

Tip Number One: Rails Layout
First of all, just be aware as you’re trying to apply your awesome design that the files you’ll need to edit are all over the place. I assume you’re already hip to either Firebug for Firefox and/or the Chrome Developer Tools. These will help show you what styles are being displayed for a given element, but you then have to track down in the code where that stuff is generated.

As you can see from the Nettuts tutorial, there are a lot of directories going on, but if you’re just trying to apply a design you’re going to be mostly concerned with the /app/views/layouts directory.

The stylesheet and javascript files are located in /public/stylesheets/ and /public/javascripts/ respectively, but when its time to get down with the actual layouts, things get tricky

Clues to Rails Files
Figuring out where to put CSS clases or IDs onto HTML tags so you can apply your styles can be a bit of a pig, but there are some clues. I referred often to the terminal window where I started rails server on my local machine. Every time you refresh the site, rails will tell you exactly what it is rendering from what files, like this:

Started GET "/user_session/new" for at Tue Jan 11 12:20:21 -0500 2011
  Processing by UserSessionsController#new as HTML
Rendered layouts/_header.html.erb (6.2ms)
  SQL (0.6ms)  SELECT COUNT(*) AS count_id FROM (LOL BORING SQL)) AS subquery
Rendered layouts/_navbar.html.erb (19.6ms)
Rendered layouts/_message.html.erb (2.7ms)
Rendered layouts/_noticeerror.html.erb (1.8ms)
Rendered layouts/_footer.html.erb (0.8ms)
Rendered user_sessions/new.html.erb within layouts/user_session (73.4ms)
Completed 200 OK in 243ms (Views: 83.5ms | ActiveRecord: 0.6ms)

If you’re familiar with templating, you’re straight away going to be looking for the master template file that tells everything where to be. Most of the time you’re going to have a file called /app/views/layouts/application.html.erb which is the one you’re looking for, but in this case, as you can see from line 9 above, there’s a different master layout file being used. Check this out:

Rendered user_sessions/new.html.erb within layouts/user_session (73.4ms)

See how that says “layouts/user_session” instead of “layouts/application”? That’s because the controller, mentioned on line 2 of the server output, has this in it:

class UserSessionsController < ApplicationController
  layout "user_session"

You use controllers this way to tell ruby what layouts to load based on what got requested. Sneaky, huh? Now, let's talk about partials.

I'm partial to partials, and so is the marshall
Those files listed like this are partials:

Rendered layouts/_header.html.erb (6.2ms)

You can tell because it has an underscore as the first character in the file name. You can also tell because you'll see this in the master layout file that called it:

<%= render :partial => 'layouts/header' %>

A partial is a bit of layout code that you know you'll be using again. You don't want to repeat yourself, so if you discover a slice of templating code that is in more than one file, abstract that mother out to a partial and render it like a boss. That way you don't have to change it more than once if you should need to.

Last, but not least, let's talk about adding a class.

How to add a class to a tag
You won't see a lot of raw HTML in these .erb files. Instead you will see code like this that saves the developers a lot of time, but doesn't include an obvious place to add a class selector so you can style whatever it is:

<%= form_for @user, :url => users_path do |f| %>
  <%= f.error_messages %>
  <%= render :partial => "form", :locals => {:f => f} %>
  <%= f.submit "Create" %>
<% end %>

If you want to add a class to that submit button so that it doesn't look like a visual fart from 2002, just add this bit of magic to line 4:

  <%= f.submit "Create", :class => "class_name" %>

That's pretty much all I know so far and I'm learning every time I dive into this stuff. Please help me by correcting or adding thoughts to anything I have written here! Thanks to Chris Kelly at Highgroove for fielding my questions during the week!

Speak Your Mind