https://github.com/tmeasday/edifice

https://github.com/tmeasday/edifice

Last synced: 11 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tmeasday/edifice
• Owner: tmeasday
• License: mit
• Created: 2010-05-27T23:06:56.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2012-06-15T03:57:01.000Z (over 12 years ago)
• Last Synced: 2024-10-25T18:58:34.232Z (about 2 months ago)
• Language: Ruby
• Homepage:
• Size: 375 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE

Awesome Lists containing this project

README

        
Edifice

=======

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](/tmeasday/edifice-forms) and [edifice-widgets](/tmeasday/edifice-widgets)--which do not rely on, but complement it well.

Installation

------------

To install, simply add to your Gemfile:

```ruby

gem 'edifice'

```

Page Specific CSS

-----------------

Add this to your body tag:

```html

```

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

```css

.c_users.v_show h1 {

  background-color: red;

}

```

Of course this namespacing works best with a CSS-preprocessor like [SCSS](http://sass-lang.com/):

```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`:

```js

/*

 *= require edifice

 */

```

Include the edifice meta tags in your header:

```erb

  <%= 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](https://github.com/defunkt/jquery-pjax)), like so:

```js

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.

License

-------

[Edifice](http://edifice-rails.com) is crafted by [Percolate Studio](http://percolatestudio.com) and released under the [MIT license](www.opensource.org/licenses/MIT)