Tangerine

Tangerine is a plugin for comparing wireframe designs with the rails application that you are developing.

Basic Example

Install the plugin:

    ./script/plugin install git://github.com/paulbjensen/tangerine.git

Or if you prefer git submodules:

    git submodule add git://github.com/paulbjensen/tangerine.git vendor/plugins/tangerine

Require the header files. Within the head element of your html layout file, you can either use this:

    <%= tangerine_header %>

In the html file that you wish to render a wireframe for, provide the url to the wireframe image:

    <%= overlay(PATH_TO_WIREFRAME_IMAGE_FILE) %>

for example:

    <%= overlay("http://privatecdn.co.uk/projects/17/wireframes/products_page.jpg") %>

What you will see in the browser is a floating set of 3 buttons with which to show, hide, and compare the wireframe against the site. You can also drag the bar around so that it doesn't get in the way.

Tangerine will only display in development mode, so if you leave the plugin in the code and deploy your application to staging or production, you won't see the plugin.

Advanced Options

Tangerine depends on JQuery 1.3.2 and JQuery-UI 1.7.2. The tangerine_header method loads javascript links to Google's hosted versions of jquery and jquery-ui.

If one or both of these javascript libraries are already a part of your rails application, then you can pass options to the tangerine_header method to not include them:

    <%= tangerine_header(:include_jquery => false, :include_jquery_ui => false).

That's your flower pot!

If you have any feedback or queries, you can email me at Paul at New-Bamboo dot co dot uk.

Copyright (c) 2009 Paul Jensen, released under the MIT license. Cockney translation for flower pot: lot.