Opinionated Forms, Tables, and Widgets for Rails and Sinatra


gem install storefront

Quick Examples

Below are a few examples of using the view helpers. Wiki coming soon. For examples, see the Haml partials in the specs.


= form_for @user do |form|
  = form.fieldset do |fields|
    = fields.field :name
    = fields.field :email
  = form.submit

The forms also come with an awesome validation API. Any model validations will be included in data- attributes, such as <input data-validates-min-message='Your login must be at least 3 characters long.' data-validates-min='3' .../>. More documentation on this feature to come.


Storefront also builds tables similar to how it builds forms.

= table_for :users do |t|
  = t.head do
    = t.row do
      = t.header "Name"
      = t.header "Email"
      = t.header "Status"
  = t.body do
    - @users.each do |user|
      = t.row do
        = t.cell do
          = link_to, user_path(user)
        = t.cell
        = t.cell user.status.titleize
  = t.foot do
    -# ...


= widget :menu do
  = nav :home, pages_path(:home)
  = nav :about, pages_path(:about)

Definition Lists

= widget :terms do
  = term :key, "value"
  = term :created_at, time_at(@user.created_at)

Javascript Templates

= widget :javascript_template do
  = widget :text, :title => "${title}", :content => "${content}"
<script id='javascript-template' type='text/html'>
  <article class='widget text'>
    <header class='header'>
      <h3 class='title'>${title}</h3>
    <p class='content'>${content}</p>

Other Widgets

= widget :text, :title => "Contact Information", :body => "If you have any questions, please feel free to contact us."


    CDN: Content Delivery Network
= keyboard_tag(:command) # <kbd title="command">⌘</kbd>
= keyboard_shortcut_tag(:command, :shift, :s, :shortcut => :save) # <kbd title='save'><kbd title='command'>⌘</kbd><kbd title='shift'> ⇧</kbd><kbd>s</kbd></kbd>


You can configure pretty much everything, such as what dom structures get auto-generated ids, which ones use aria-roles, default html classes, etc. Examples soon.


MIT License. © 2011 Lance Pollard.