From WhyNotWiki

[edit] [View-level (category)]

Presentation layer. Includes presentation logic. Includes layouts...

[edit] RecordSelect

http://code.google.com/p/recordselect/. Retrieved on 2007-05-11 11:18.

This plugin is a streamlined listing tool with a dedicated purpose: to let you select a record from a possibly large record set in a friendly fashion. It will report the selected record(s) to a given method on the controller or to a JavaScript function on the client.

Included is a +link_to_record_select+ helper to assist with embedding a RecordSelect popup in your page. Also included is a +record_select_field+ helper. This helper ties RecordSelect into your form by making it set a hidden input field. Think of it as a paginated and searchable autocomplete dropdown. Or think of it as a <select> replacement that won't bog down with large recordsets.

...

  class UsersController < ApplicationController
    record_select :per_page => 5, :search_on => 'username'
  end

[edit] Simply Presentable

http://wiki.rubyonrails.org/rails/pages/Model+Extensions

Save keystrokes and stay DRY with SimplyPresentable:

< present!(foo).form do |f| >
  <= f.text_field :bar >
< end >

Instead of

<% form_for(
     foo.new_record? ? {
       :url => 'http://example.com/foos',
       :html => { :method => 'post', :id => 'new_foo', :class => 'new_foo' }
     } :
     {
        :url => "http://example.com/foos/#{foo.id}",
        :html => { :method => 'put', :id => 'foo_1', :class => 'foo' }
      } :
    ) do |f| %>
  <= f.text_field :bar >
< end >

SimplyPresentable is a plugin for that introduces the idea of presenters to Rails.

[edit] Resource on Demand

Within the head tag of the layout:

<%= require_on_demand %>

Then from anywhere in you views or partials:

<% require_javascript "my", "javascript", "files", :defaults %>

This will add the specified javascripts and to the head tag without duplicates.

<% require_stylesheet 'my_stylesheet' %>

[edit] MenuEngine

http://www.muermann.org/ruby/menu_engine/

MenuEngine is a small Rails engine that can generate templated drop-down DHTML menus commonly used for web site navigation. screenshot

MenuEngine supports creation of menus from a YAML file, from code and from pre-configured HTML. The javascript library can also be used outside of Rails.

Sample code [1]:

---
- !ruby/object:MenuItem 
  controller: users
  action: list
  items: []
  - !ruby/object:MenuItem 
    text: List
    controller: users
    action: list
  - !ruby/object:MenuItem 
    text: New User<br/><span style=%"font-size:80%">Add a new user</span>
    controller: users
    action: new
- !ruby/object:MenuItem 
  controller: images
  items: []
  - !ruby/object:MenuItem 
    text: View Images
    controller: images
    action: list

or:

<div id="item_0">
        <%=link_to "Menu Item 0", :controller=>'some_controller' %>
        <div id="sub_menu_0_0">
                <div id="item_1"><%=link_to "Menu Item 1", :controller=>'some_controller', :action=>'list' %></div>
                <div id="item_2"><%=link_to "Menu Item 2", :controller=>'some_controller', :action=>'new' %></div>
        </div>
</div>
<div id="item_0">
        <%=link_to "Menu Item 3", :controller=>'some_other_controller' %>
</div>

<script>
        <%= menu_item 'item_0' %>
                <%= sub_menu 'sub_menu_0_0', 'item_0' %>
                <%= menu_item 'item_1', 'item_0' %>
                <%= menu_item 'item_2', 'item_0' %>
        <%= menu_item 'item_3' %>
</script>

[edit] Client-Side Validation

http://rubyfurnace.com/plugins/client_side_validation

This plugin is only a tool, it leaves some work for you to do. The plugin happily handles the validation part, but it is your job to handle the notification.

Let’s look at the simplest case first. In public/javascripts/application.js put:

Form.Validator.installForAllValidatedForms();

This installs a validator for each form on the page which has the class “validated”. If any of the form’s input elements are or become invalid, they are marked with the class “invalid”. If you have something like this

.invalid {

 border: 1px solid #f00;

}

somewhere in your stylesheet(s), invalid fields will be marked with a red border. This works for

•  :validates_presence_of
•  :validates_length_of
•  :validates_numericality_of
•  :validates_inclusion_of
•  :validates_format_of – as far as regular expressions are matched the same in Ruby and JavaScript

[edit] Redbox

http://rubyfurnace.com/plugins/redbox

Redbox is a very simple lightbox library, which is a way of displaying a modal popup window which may contain any HTML, while the rest of the page is faded out behind it.

• Based on: Thickbox
• http://rubyfurnace.com/plugins/redbox
• Repository Path: http://www.tinboxsoftware.com/plugins/show/redbox/
• Homepage: http://blog.craigambrose.com/articles/2006/08/16/redbox-a-rails-compatible-lightbox

[edit] NestedLayouts

Plugin allows to specify outer layouts for particular layout thus creating nested layouts.

Let’s assume you have controller which action ‘hello’ just was called. Controller was set up to use ‘inner’ layout:

  app/controllers/hello_controller.rb

    class HelloController < ApplicationController
      layout 'inner'

      def hello
        render :text => 'Hello, world!'
      end
    end

  app/views/layouts/inner.rhtml

    <% inside_layout 'outer' do -%>
      <div class="hello">
        <h1>Greetings</h1>
        <%= yield %>
      </div>
    <% end -%>

  app/views/layouts/outer.rhtml

    <html>
    <body>
      <div class="content">
        <%= yield %>
      </div>
    </body>
    </html>

Result will look like this (formatted for better reading):

    <html>
    <body>
      <div class="content">
        <div class="hello">
          <h1>Greetings</h1>
          Hello, world!
        </div>
      </div>
    </body>
    </html>

Concept of layout nesting here is based on the assumption that every inner layout is used only to customize it’s outer layout and thus every inner layout is used only with one specific outer layout. With this in mind we can conclude that every layout must know its outer layout and thus information about outer layout must be embeded directly into inner layout. Controller doesn’t need to know about the whole stack of layouts, so you should just specify the most inner layout in it. Passing data

You can pass data from inner layout to outer one, e.g.:

  layouts/inner.rhtml

    <% content_for 'menu' do -%>
      <ul>
        <li><a href="about_us">About Us</a></li>
        <li><a href="products">Products</a></li>
      </ul>
    <% end -%>

    <% inside_layout 'outer' do -%>
      <% @other_data_for_outer_layout = 'foo' -%>
      <%= yield %>
    <% end -%>

  layouts/outer.rhtml

    <%= yield 'menu' %>
    <br/>
    The data was: <%= @other_data_for_outer_layout %>
    <br/>
    <%= yield %>

[edit] ErbBuffer: Painless Nested output buffering [ERb (category)]

<% @contents_surface = capture_buffer do %>
        Top level goodies
        <% @contents_shallow = capture_buffer do %>
                Mid level content
                <% @contents_deep = capture_buffer do %>
                        deeper deeper, i say, deepah
                <% end %>
        <% end %>
<% end %>

<%= @contents_surface %>
<%= @contents_shallow %>
<%= @contents_deep %>

• http://rubyfurnace.com/plugins/erbbuffer
• http://www.ahgsoftware.com/pages/erb_buffer

[edit] Elemental: Call XHTML elements as methods in your ERb templates [ERb (category)]

http://rubyfurnace.com/plugins/elemental

Call XHTML elements as methods in your ERb templates:

<%= p @item.content %>
becomes
<p>Your Content</p>


<%= span "some content", :id => "54" %>
becomes
<span id="54">some content</span>


<% ul do ['one', 'two', 'three'].each do |item| %>
  <%= li item %>
<% end end %>

becomes

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

[edit] [autocompletion (category)]: select_autocompleter

http://rubyfurnace.com/plugins/select_autocompleter

Similar to Autocompleter functionality except it pops up a listbox instead of a list.

To do an incremental search on the ‘name’ field of the ‘product’ table:

In your template:

<%= text_field_with_select_auto_complete :product, :name, {}, { :row_count => 4, :min_chars => 2, :redirect_url => {:action => ‘show’, :id => ’??’}} %>

In your controller:

select_auto_complete_for :product, :name

• http://rubyfurnace.com/plugins/select_autocompleter
• Repository Path: svn://rubyforge.org/var/svn/select-autocomp/select_autocompleter
• Homepage: http://rubyforge.org/projects/select-autocomp

[edit] Simple Object Tag Generator

http://www.ahgsoftware.com/pages/simple_object

"works just like an ActionView helper, and generates my embed tags intelligently from the filetype that I pass in!"

# In a 'view', with just default parameters
simple_object_tag "/example.mp3"

# with some additional parameters, real ones, and crazy ones..
simple_object_tag "/flashgame.swf",:scale=>"tofit",:junk=>"shizzle"

[edit] Shiny Render

<h1>Greetings</h1>
        <%= yield %>
      </div>
    <% end -%>

  app/views/layouts/outer.rhtml

    <html>
    <body>
      <div class="content">
        <%= yield %>
      </div>
    </body>
    </html>

Result will look like this (formatted for better reading):

    <html>
    <body>
      <div class="content">
        <div class="hello">
          <h1>Greetings</h1>
          Hello, world!
        </div>
      </div>
    </body>
    </html>

Concept of layout nesting here is based on the assumption that every inner layout is used only to customize it’s outer layout and thus every inner layout is used only with one specific outer layout. With this in mind we can conclude that every layout must know its outer layout and thus information about outer layout must be embeded directly into inner layout. Controller doesn’t need to know about the whole stack of layouts, so you should just specify the most inner layout in it. Passing data

You can pass data from inner layout to outer one, e.g.:

  layouts/inner.rhtml

    <% content_for 'menu' do -%>
      <ul>
        <li><a href="about_us">About Us</a></li>
        <li><a href="products">Products</a></li>
      </ul>
    <% end -%>

    <% inside_layout 'outer' do -%>
      <% @other_data_for_outer_layout = 'foo' -%>
      <%= yield %>
    <% end -%>

  layouts/outer.rhtml

    <%= yield 'menu' %>
    <br/>
    The data was: <%= @other_data_for_outer_layout %>
    <br/>
    <%= yield %>

[edit] ErbBuffer: Painless Nested output buffering [ERb (category)]

<% @contents_surface = capture_buffer do %>
        Top level goodies
        <% @contents_shallow = capture_buffer do %>
                Mid level content
                <% @contents_deep = capture_buffer do %>
                        deeper deeper, i say, deepah
                <% end %>
        <% end %>
<% end %>

<%= @contents_surface %>
<%= @contents_shallow %>
<%= @contents_deep %>

• http://rubyfurnace.com/plugins/erbbuffer
• http://www.ahgsoftware.com/pages/erb_buffer

[edit] Elemental: Call XHTML elements as methods in your ERb templates [ERb (category)]

http://rubyfurnace.com/plugins/elemental

Call XHTML elements as methods in your ERb templates:

<%= p @item.content %>
becomes
<p>Your Content</p>


<%= span "some content", :id => "54" %>
becomes
<span id="54">some content</span>


<% ul do ['one', 'two', 'three'].each do |item| %>
  <%= li item %>
<% end end %>

becomes

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

[edit] [autocompletion (category)]: select_autocompleter

http://rubyfurnace.com/plugins/select_autocompleter

Similar to Autocompleter functionality except it pops up a listbox instead of a list.

To do an incremental search on the ‘name’ field of the ‘product’ table:

In your template:

<%= text_field_with_select_auto_complete :product, :name, {}, { :row_count => 4, :min_chars => 2, :redirect_url => {:action => ‘show’, :id => ’??’}} %>

In your controller:

select_auto_complete_for :product, :name

• http://rubyfurnace.com/plugins/select_autocompleter
• Repository Path: svn://rubyforge.org/var/svn/select-autocomp/select_autocompleter
• Homepage: http://rubyforge.org/projects/select-autocomp

[edit] [Controller-level (category)]/[View-level (category)]: Graphics / graphing

See also: Ruby_libraries#Graphics

[edit] ZiYa

http://rubyfurnace.com/plugins/ziya

The ZiYa is a rails charting plugin that is easy to integrate with your existing rails app and provide for amazing charting capabilities.

[edit] [View-level (category)]: In the context of [ActionMailer (category)]

http://cardboardrocket.com/archives/2007/1/14/the_action_mailer_layouts_plugin/

I've put together a plugin that makes it easy to use layouts in your ActionMailer templates. I found myself writing very un-DRY (wet?) email templates recently and decided it was time to fix that.

[edit] [View-level (category)]: Trees

[edit] LiveTree

[2]

    class FamilyController < ApplicationController
        live_tree :family_tree, :model => :person
        def show_tree
            @root = Person.find(params[:id]);
        end
    end

    <div style="width:300px;height:415px">
        <%= live_tree(:family_tree, {
            :initial_data_root => @root,
            :on_click_item => "alert('You clicked on ' + item.name)",
        }) %>
    </div>

[edit] Features

• Can load data asynchronously as-needed (so only the parts of the tree the user needs are sent to the client).
• Data can be provided in the HTML page as well, in which case no asynchronous loading is needed, making this widget suitable for standalone client-side use.
• Ideal for large/deep data sets (such as navigating a file system, or complete table of contents of a book).
• Intelligently pre-loads parts of the tree that it anticipates the user will want to look at, so delays for the user are minimized.
• Customizable using CSS, snippets of HTML, event handlers, and many options.
• Controllable from JavaScript.
• Supports deep linking - can jump to a part of the tree that has not been loaded yet, and it will search for that item and load its parents.
• Supports an "active" (highlighted) item.
• Automatically scrolls the tree so that what the user is interested in is on the screen.
• Can Use acts_as_tree or acts_as_nested_set model for data from Rails.
• Easy to integrate into your application.
• Can be used standalone (client-side only without server support).

[edit] [View-level (category)]: Date/time user interfaces / Calendars

[edit] DHTML Calendar

http://dry.4thebusiness.com/info/dhtml_calendar

<%= calendar 'person', 'birthday',
      { :class => 'date' },
      { :firstDay => 1,
        :range => [1920, 1990],
        :step => 1,
        :showOthers => true }
%>

[edit] Dynarch DHTML / JavaScript Calendar

http://www.dynarch.com/projects/calendar/

• Popup or flat DHTML calendar
• Suitable for selecting date/time

http://www.dynarch.com/projects/calendar/ Demo

[edit] datepicker_engine [Engine (category)][Dates and times (category)]

http://rubyfurnace.com/plugins/datepicker_engine

DatepickerEngine is a collection of helpers for creating datepicker boxes in your views.

You can create a datepicker popup box like this:

<%= datepicker_popup ‘person’, ‘birthday’, { :class => ‘date’, :field_title => ‘Birthday’, :button_title => ‘Show calendar’ }, { :firstDay => 1, :range => [1920, 1990], :step => 1, :showOthers => true, :cache => true } %>

• http://rubyfurnace.com/plugins/datepicker_engine
• Repository Path: http://svn.mamatux.dk/rails-engines/datepicker_engine

[edit] [View-level (category)]: [Helpers (category)]

[edit] Simply Helpful

Various helpers for views.

For example:

<% content_tag_for(:li, @person, :class => “bar”) %>
=>
<li>id=”person_123” class=”person bar”< /li>

[edit] Microformat Helper [helper (category)]

A helper to output things in standard microformat[3] format.

http://blog.labnotes.org/2006/08/25/microformats-helper-for-ruby-on-rails/

Try it out with an hAtom feed:

<% render_hfeed do
  posts.each do |post|
    render_hentry "post-#{post.id}" do %>
      <%= hentry_title post.title %>
      <%= hentry_content post.content %>
      <p>Published on <%= post.created_on.microformat :published %> by
        <%= hcard :fn=>post.author, :url=>post.author_url, :class=>"author" %>
      </p><%
    end
  end
end %>

The plugin currently provides helper methods for hAtom, basic hCard, and the datetime design pattern.

[edit] [View-level (category)]: User-interfaces/form helpers

Helpers for generating form elements for models, etc.

[edit] confirmation_field

http://svn.ardes.com/rails_plugins/confirmation_field/init.rb ([View logic is okay sometimes (category)])

Moves the logic of dealing with confirmation fields into the view where it belongs.

A confirmation field is a virtual attribute that is used with

  validates_confirmation_of :email

, :email_confirmation being the virtual attribute in the above example.

There's a small but annoying view logic issue with this, when you are presenting an update view of a model with a confirmation attribute, the confirmation field will initially be left blank. When the form is submitted, the above validation will fail, unless the user types in the confirmation field - very annoying for when you're only updating your phone number for example.

This means that you have to write some view logic to deal with this (a worse idea would be to change the *model* to deal with this view issue).

With this plugin you can do this in your views:

  <%= text_field :customer, :email %>
  <%= confirmation_text_field :customer, :email %>

  <%= password_field :customer, :pass %>
  <%= confirmation_password_field :customer, :pass %>

or

  <% form_for :customer, @customer do |f| %>  
    <%= f.text_field :email %>
    <%= f.confirmation_text_field :email %>
  <% end %>

[edit] [user interface for associations/lists (category)]: associated_list

http://rubyfurnace.com/plugins/associated_list

If you are producing a form for a rails model object and it has a has_many or has_and_belongs_to_many relationship of some other simple objects (which can be identified by name), then this plugin might be for you. It uses a select box to add items to the list, and delete buttons to remove them. It's all client side, using hidden fields, until you submit the form and it saves the relationships in your model.

[edit] Related select forms

http://retro.dvisionfactory.com/projects/related-select-forms/readme

[edit] Example: Two related select forms

tables

car_companies: id, name
car_models:    id, name, car_company_id

view

<%= collection_select(
      :car_company, :id, CarCompany.find(:all), :id, :name) %>
<%= related_collection_select(
      :car_model, :id, [:car_company, :id], 
        CarModel.find(:all), :id, :name, :car_company_id) %>

The code above will create two drop-down select tags. The 1st allows the selection of a car company. Based on this decision the 2nd select tag shows company specific car models.

[edit] Multiple Select Helper

http://rubyfurnace.com/plugins/multiple_select_helper Selecting multiple elements in a list is sometimes tricky. You may click inadvertently on one item of the list and lost all your previous selection. You are forced to use Ctrl (or Command) clicks to select more than one element.

Multiple Select Helper allows you to create an easy-to-use list for multiple selections from array, hashes, collections or trees. The list is built using checkboxes so you can click easily and you will not lost the elements you clicked before. As a drawback you lose the use of the keyboard in the “list”.

This multiple selections are very useful in many to many relationships (has_and_belongs_to_many or has_many :through with no obligatory fields) where a “add and remove” solution would be cumbersome.

Comments:

• Probably a better (more robust; less finicky; less susceptible due to browser quirks) solution than what we implemented for the Mask (multi-select list box without using Ctrl-Click) — Tyler (2007-03-08 17:10)

[edit] [View-level (category)]: [Captchas (category)]

[edit] BrainBuster

http://rubyfurnace.com/plugins/brainbuster

BrainBuster is a logic captcha—a test to try and tell computers and humans apart via a simple logic puzzle, math problem, or word problem.

The big benefit over typical image based captchas is that a logic captcha is fully accessible for visually-impaired users who use screen readers.

• http://rubyfurnace.com/plugins/brainbuster
• Homepage: http://www.robsanheim.com/brain-buster

[edit] [View-level (category)]: JavaScript/RJS

[edit] [View-level (category)]: Alternative templating languages

Ruby templating languages edit

!!!
%html
  %head
    %title Client Admin Site
    %meta{"http-equiv"=>"Content-Type", 
       :content=>"text/html; charset=utf-8"}/
    = stylesheet_link_tag 'tabbed'
    = javascript_include_tag 'tabbed'
  %body
    #application
      #header
        .container
          .statusbar
            .logo
              %strong Admin Interface
            .menu= link_to 'logout',  
               :controller => 'account', :action => 'logout'
          %br{:style=>"clear:both;"}/
          .tabs
            %ul.navigation
              %li= link_to 'Member Approval', member_admin_url
              %li= link_to 'User Management', user_admin_url, 
                 :class => 'selected'
              %li= link_to 'Pages', page_admin_url
              %li= link_to 'Reports', reports_url
              %li= link_to 'Help', '/'
      #page
        #content
          //These will only render if there is 
             a non-false value returned from the helper
          #errors= print_flash(:error)
          #notice= print_flash(:notice)
          = @content_for_layout
        #sidebar= @content_for_sidebar || false
        %hr/
      #footer
        %p= "Copyright Hampton Catlin 2006"

 html do
   head do
     title action_name
     stylesheet_link_tag 'scaffold'
   end

   body do
     p flash[:notice], :style => "color: green" 
     self << content_for_layout
   end
 end

{% extends 'layout/base.tmpl' %}
{% block title %}Index{% endblock %}
{% block pageid %}index{% endblock %}
{% block content %}
  <h2>What is Ruty?</h2>
  <p>
    Ruty is a sandboxed, django/jinja like template engine with
    template inheritance support. It's completely sandboxed so
    template designers won't be able to screw things up or execute
    code which is not meant to be executed.
  </p>
  <h2>What does it look like?</h2>
  <p>
    This webpage is generated of Ruty templates. On each page you
    see a link in the footer to show the sourcecode. For more
    examples you can head over to the
    <a href="/documentation/">documentation</a>.
  </p>
{% endblock %}

[edit] RJS if/unless blocks

Allows you to generate (JavaScript) if/unless blocks in RJS templates

page.if page[element_id].visible do
  page[element_id].hide
end

• Repository Path: svn://rubyforge.org/var/svn/js-if-blocks/trunk
• Homepage: http://rubyforge.org/projects/js-if-blocks/

[edit] [View-level (category)]: CSS repetition removers / pre-processors / with embedded Ruby

[edit] Comparison

(Based on: [4])

[edit] CSS Dryer

http://rubyfurnace.com/plugins/css_dryer

Eliminate Repetition In Your Stylesheets

Cascading style sheets (CSS) are wonderful but repetitive. Rails strongly discourages repetition, the don’t repeat yourself (DRY) principle, so writing CSS feels ungainly in Rails.

There are two sources of repetition in CSS:

• nested selectors
• lack of variables

Nested selectors lead to CSS like this:

div           { font-family: Verdana; }
div#content   { background-color: green; }
div#content p { color: red; }

Note the triple repetition of div and the double repetition of #content.

The lack of variables leads to CSS like this:

.sidebar { border: 1px solid #fefefe; }
.content { color: #fefefe; }

Note the repeated color #fefefe.

The CssDryer eliminates both of these sources allowing you to write DRY, pleasing stylesheets. The examples above become:

<% dark_grey = '#fefefe' %>

div {
  font-family: Verdana;
  #content {
    background-color: green;
    p { color: red; }
  }
}

.sidebar { border: 1 px solid <%= dark_grey %>; }
.content { color: <%= dark_grey %>; }

• http://rubyfurnace.com/plugins/css_dryer
• Repository Path: http://opensource.airbladesoftware.com/trunk/plugins/css_dryer
• Homepage: http://blog.airbladesoftware.com/2006/12/11/cssdryer-dry-up-your-css

[edit] Simple RCSS

This plugin provides support for RCSS templates to the rails application environment. These operate the same as standard CSS files, but also allow the addition of ERb within the file.

...

When run in production mode, it will automatically cache the stylesheets so that the web-server will deliver them in subsequent requests.

Or you can pre-cache all of the stylesheets by using the included rake tasks.

[edit] DCSS: CSS pre-processor

http://rubyfurnace.com/plugins/dcss

A pre-processor for css that allows you to reduce duplication and simplify your css files.

DCSS is also available as a ruby gem.

http://myles.id.au/2006/11/20/introducing-dcss

[...] It becomes problematic as stylesheets start to get larger and more special cases are introduced:

body.home-page #archives h3, body.home-page #favorites h3 { text-align: center; font-family: Georgia, serif; }
body.home-page #archives li, body.home-page #favorites li { list-style: square; }
body.home-page #archives li a, body.home-page #favorites li a { color: green; }
body.home-page #archives li a:hover, body.home-page #favorites li a:hover { color: orange; }

In a situation like the above, adding a class to each element isn’t really an option as these styles should only apply to the home page (which has body element that looks like <body class="home-page">). Plus adding a class still doesn’t add any semantic meaning to the document, it’s a design issue, not a markup one.

DCSS is a small ruby library that solves this problem by extending the CSS syntax with a new construct: {{ }}

body.home-page { } {{
  #archives, #favorites { } {{
    h3 { text-align: center; font-family: Georgia, serif; }
    li { list-style: square; } {{
      a { color: green; }
      a:hover { color: orange; }
    }} 
  }}
}}

• http://rubyfurnace.com/plugins/dcss
• Repository Path: http://svn.ducknewmedia.com.au/public/rails_plugins/dcss/trunk
• Homepage: http://myles.id.au/2006/11/20/introducing-dcss

[edit] [View-level (category)]: Themes/Skins

[edit] Vision

http://vision.shopify.com/ Vision - A Designers toolkit for Shopify themes (proprietary)

[edit] [Timelines (category)]

[edit] Simile Timeline Helper

http://rubyfurnace.com/plugins/similetimelinerailshelper

The Simile Timeline for Rails project provides a set of tools for Ruby generally, and Rails specifically to generate Simile Timeline DHTML controls in pages, and produce and consume events for display within those timelines.