Edifice.js is a rails gem for integrating your JS + CSS more closely with your Rails 3 workflow. There are two closely related gems--edifice-forms and edifice-widgets--which do not rely on, but complement it well.


To install, simply add to your Gemfile:

gem 'edifice'

Page Specific CSS

Add this to your body tag:

<body class="<%= edifice_body_classes %>">

And you are now free to namespace your CSS like so:

.c_users.v_show h1 {
  background-color: red;

Of course this namespacing works best with a CSS-preprocessor like SCSS:

.c_users.v_show {
  h1 {
    background-color: red;
  p {
    margin-bottom: 20px;

The c_ part will be set to the path of, and the v_ part to the name of the view that has been rendered by rails. We also set l_NAME to the name of the layout rendered, so you can write layout specific CSS with ease.

Page Specific Javascript

For a simple way to write page specific javascript, include edifice in your application.js:

 *= require edifice

Include the edifice meta tags in your header:

  <%= edifice_meta_tags %>

Edifice expects you to create a simple JS object that will be called when you page loads (either directly or via AJAX/PJAX), like so:

window.usersShow = {
  onReady = function() {
    alert("The users#show page has reached the DomContentLoaded state");

Alternatively you could define onLoad (which fires on window.load), or nothing at all, if you like. We're easy.


Edifice is crafted by Percolate Studio and released under the MIT license