Introduction ============ Tidy gives you an easy way to organize/manage your CSS and Javascript files via two helper methods in the ApplicationHelpers module: tidy_javascripts tidy_stylesheets Place your stylesheets and script files in pre-defined sub-directories under your app's public/, and Tidy figures out which ones to load. Usage ===== First, install the plugin using this command: script/plugin install http://github.com/bitaxis/tidy.git Next, invoke either or both methods in your layout(s). For instance, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>My Rails App</title> <%= stylesheet_link_tag tidy_stylesheets %> <%= javascript_include_tag tidy_javascripts %> </head> <body> <%= yield %> </body> </html> Then, author your code, taking care to place CSS and Javascript files in the following sub-directories: public/javascripts public/stylesheets How It Works ============ For Javascripts, Tidy includes these Javascript files in the following order, skipping non-existent ones: 1. public/javascripts/application.js 2. public/javascripts/<controller-name>/_controller.js 3. public/javascripts/<template-path>.js 4. public/javascript/<partial-path(s)>.js For stylesheets, Tidy includes these stylesheets in the following order, skipping non-existent ones: 1. public/stylesheets/application.css 2. public/stylesheets/<controller-name>/_controller.css 3. public/stylesheets/<template-path>.css 4. public/stylesheets/<partial-path(s)>.css Example ======= Suppose your Rails application resembles the following: my_rails_app/ app/ controllers/ projects_controller.rb views/ projects/ edit.html.erb index.html.erb new.html.erb show.html.erb shared/ _navigation.html.erb public/ javascripts/ application.js projects/ _controller.js index.js stylesheets/ application.css projects/ index.css shared/ _navigation.css Rendering the projects/index view will cause Tidy to load the following Javascript files: 1. public/javascripts/application.js 2. public/javascripts/projects/_controller.js 3. public/javascripts/projects/index.js Similarly, rendering the projects/index view will cause Tidy to load the following CSS files: 1. public/stylesheets/application.css 2. public/stylesheets/projects/index.css 3. public/stylesheets/shared/_navigation.css Tidy won't try to load public/stylesheets/projects/_controller.css because it does not exist. Low Pro ======= Tidy works great with Dan Webb's Low Pro for unobtrusive Javascripting. If you are not yet a fan, check it out at http://github.com/danwrong/low-pro/. Credits ======= Tidy was originally inspired by Peter Harkin's blog post at http://push.cx/2006/tidy-stylesheets-in-rails. I first expanded his idea to also manage Javascripts. It is now available as a plugin. Copyright (c) bitaxis.com, released under the MIT license.