Stylish Rails

Scaffolding in Ruby on Rails 2.02 is very simple to use and a great time saver. However, the views that are generated are very, um, well they’re just plain ugly. In addition, they’re not very accessible to users with older browsers or that use assistive technology.

Of course everyone that codes in Rails is an expert in CSS of has access to a professional web designer who can clean up those ugly and inaccessible views really quick, right? Well, not in my one-man show. And all of the reference material that I’ve read on Rails skips over the part that explained how to make your views presentable, usually by simply stating: “Magic Happens Here”. So I learned styling the hard way – by reading everything I could get my hands on.

In this post I’m going to demonstrate how to apply simple styling to scaffold generated views using CSS. I’ll demonstrate how to markup and style a simple form layout that includes a border with a legend and right-justified field labels. Sure, there are plugins you can get to help you out but what fun would that be? Besides, everyone has their own style.

I will be referencing the excellent SitePoint book The Art and Science of CSS. In particular, Chapter 5: Forms, written by Cameron Adams, provides an excellent step-by-step tutorial on creating attractive and accessible forms.

Note that I’m assuming you already know how to use the Rails 2.0 scaffolding feature. If not, there’s lots of material out there that can get you up to speed.