Cascading Javascripts and Stylesheets in Rails Apps

Submitted by admin on Fri, 09/15/2006 - 00:00

Check this out - These will cascade your js and css - so separate views can have separate js and css files.

Cascading Javascripts is a plugin that enhances the behaviour of the built-in javascriptincludetag macro.

Cascading Stylesheets is a plugin that enhances the behaviour of

the built-in stylesheetlinktag macro to support a :defaults parameter.

More an Cascading Javascripts

If :defaults is passed as a parameter, the javascriptincludetag macro will load the following javascript files (if present) in order:

  1. application.js; and
  2. #{controllername/actionname}.js (eg. home/index.js, customers/new.js, etc.).

This allows you to define application-wide and page-specific javascript files without needing to manually include each one.

To use, simply call javascriptincludetag from application.rhtml including :defaults as a (or the only) parameter:

<!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" lang="en" xml:lang="en">
      <head>
        ...
        <%= javascript_include_tag :defaults %>
      </head>
      <body>
        ...
      </body>
    </html>

Download

The latest version of the plugin is available from svn://rubyforge.org/var/svn/redhillonrails/trunk/vendor/plugins/cascading_javascripts

More an Cascading Stylesheets

Cascading Stylesheets is a plugin that enhances the behaviour of the built-in stylesheetlinktag macro to support a :defaults parameter. If :defaults is passed as a parameter, the stylesheetlinktag macro will load the following stylesheets (if present) in order:

  1. application.css;
  2. #{RAILS_ENV}.css (ie development.css, production.css, uat.css, etc.); and
  3. #{controllername/actionname}.css (eg. home/index.css, customers/new.css, etc.).

This allows you to define application-wide, environment-specific (such as different backgrounds for UAT and production) and page-specific styles without needing to manually link each one.

To use, simply call stylesheetlinktag from application.rhtml (in much the same way as you would use javascriptincludetag) passing :defaults as a (or the only) parameter:

<!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" lang="en" xml:lang="en">
      <head>
        ...
        <%= stylesheet_link_tag :defaults %>
        <%= javascript_include_tag :defaults %>
      </head>
      <body>
        ...
      </body>
    </html>

Download

The latest version of the plugin is available from svn://rubyforge.org/var/svn/redhillonrails/trunk/vendor/plugins/cascading_stylesheets