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'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.
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:
<head>
<%= edifice_meta_tags %>
</head>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