How to keep your stylesheets clean and organized using Rails This tutorial covers building a web application from scratch using Rails with the styled_objects plugin. As an example we will be building a very static front-end website, mainly to focus on stylesheets. Everything you get from can be applied to more complex applications. Because this is such a simple application, we won’t be using scaffolding generators.

About styled_obejcts

styled_objects is a Rails plugin for simplifying stylesheet management on your application. Instead of having one or more large stylesheets on your public folder, have many. Keep your CSS close to their respective templates. styled_objects will compile them into one file per page.

Getting started

1. Bootstrap your Rails app 
$ rails testapp
2. Install the LESS gem: Edit your config/environment.rb and place, anywhere before the “end”: [ruby]config.gem ‘less’[/ruby] Run on the shell: 
$ sudo rake gems:install
2. install the styled_objects plugin 
script/plugin install git://github.com/pgte/styled_objects.git

The application

Here we will be building a simple example application for an e-commerce website. First we will be focusing on building the controllers and the views, and finally we will learn how to style them with styled_objects. To start we will be having products and product categories. One product can be in many categories and one category can contain many products. So, it is a many-to-many relationship. For the sake of simplicity, let’s say a product has a name and a description. Each category have a name. (I won’t go through the building of the models, it’s beyond the scope of this tutorial).

Product page

After you have your migrations and models setup, we need to configure the routes for our products controller. Edit your config/routes.rb and add: [ruby]map.resources :products[/ruby] Now build the controller under app/controllers/products_controller.rb. For now we will only have a “show” action: [ruby] class ProductsController