Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Opinionated Forms, Tables, and Widgets for Rails

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 config
Octocat-spinner-32 generators
Octocat-spinner-32 lib
Octocat-spinner-32 spec
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .rspec
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.md
Octocat-spinner-32 Rakefile
Octocat-spinner-32 storefront.gemspec
README.md

Storefront

Opinionated Forms, Tables, and Widgets for Rails and Sinatra

Install

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.

Forms

= 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.

Tables

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.name, user_path(user)
        = t.cell user.email
        = t.cell user.status.titleize
  = t.foot do
    -# ...

Menus

= 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>
    </header>
    <p class='content'>${content}</p>
  </article>
</script>

Other Widgets

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

Text

en:
  abbreviations:
    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>

Configure

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.

W3C


MIT License. © 2011 Lance Pollard.

Something went wrong with that request. Please try again.