/foundation_rails_helper

Rails Helper for Zurb Fondation framework

Primary LanguageRubyMIT LicenseMIT

Foundation Rails Helper Build Status

Gem for Rails 4.1+ applications that use the excellent Zurb Foundation framework.

So far it includes:

  • A custom FormBuilder that generates a form using the Foundation framework classes. It replaces the current form_for, so there is no need to change your Rails code. Error messages are properly displayed.

  • A display_flash_messages helper method that uses Zurb Foundation Alerts UI.

Compatibility

  • Only Rails 4.1/4.2 and Foundation 5 are fully supported
  • Some features may work with Foundation 4 and older, but results may vary, and markup which exists only for those versions will be gradually removed
  • Legacy branches exist for Rails 3 and 4.0 (see the rails3 and rails4.0 branches). These are not actively supported, and fixes are not retroactively applied, but pull requests are welcome.

Screenshots

Forms

A classic devise sign up view will look like this:

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= f.email_field :email, label: 'E-mail' %>
  <%= f.password_field :password %>
  <%= f.password_field :password_confirmation %>

  <%= f.submit %>
<% end %>
Form Form with errors

Flash messages

Flash-message

Installation

Add this line to your application's Gemfile:

gem 'zurb-foundation'
gem 'foundation_rails_helper'

And then execute:

$ bundle

Flash Messages

To use the built in flash helper, add <%= display_flash_messages %> to your layout file (eg. app/views/layouts/application.html.erb).

Usage

form_for

Form_for wraps the standard rails form_for helper.

<%= form_for @user do |f| %>
  ...
<% end %>

generates:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  ...
</form>

text_field and Field Helpers

Field helpers add a label element and an input of the proper type.

f.text_field :name

generates:

<label for="user_email">Name</label>
<input id="user_name" name="user[name]" type="text">

Preventing the generation of labels can be accomplished two ways. To disable on a form element:

f.text_field :name, label: false

For all form elements, add the option: auto_labels: false to the form helper.

Change the label text and add a class on the label:

f.text_field :name, label: 'Nombre', label_options: { class: 'large' }

If the hint option is specified

f.text_field :name, hint: "I'm a text field"

an additional span element will be added after the input element:

<span class="hint">I'm a text field</span>

Submit Button

The 'submit' helper wraps the rails helper and sets the class attribute to "small radius success button" by default.

f.submit

generates:

<input class="small radius success button" name="commit" type="submit" value="Create User">

Specify the class option to override the default classes.

Errors

On error,

f.email_field :email

generates:

<label class="error" for="user_email">Email</label>
<input class="error" id="user_email" name="user[email]" type="email" value="">
<small class="error">can't be blank</small>

The class attribute of the 'small' element will mirror the class attribute of the 'input' element.

If the html_safe_errors: true option is specified on a field, then any HTML you may have embedded in a custom error string will be displayed with the html_safe option.

Prefix and Postfix

Simple prefix and postfix span elements can be added beside inputs.

f.text_field :name, prefix { value: 'foo' small: 2, large: 3 }

generates

<div class="row collapse">
  <div class="small-2 large-3 columns">
    <span class="prefix">foo</span>
  </div>
  <div class="small-10 large-9 columns">
    <input type="text" name="user[name]" id="user_name">
  </div>
</div>

Configuration

Add an initializer file to your Rails app: config/initializers/foundation_rails_helper.rb containing the following block:

FoundationRailsHelper.configure do |config|
  # your options here
end

Currently supported options:

Submit Button Class

To use a different class for the submit button used in form_for, add a config named button_class:

# Default: 'small radius success button'
config.button_class = 'large secondary button'

Please note, the button class can still be overridden by an options hash.

Ignored Flash Keys

The flash helper assumes all flash entries are user-viewable messages. To exclude flash entries which are used for storing state (e.g. Devise's :timedout flash) you can specify a blacklist of keys to ignore with the ignored_flash_keys config option:

# Default: []
config.ignored_flash_keys = [:timedout]

Contributing

See the CONTRIBUTING file.

Copyright

Sébastien Gruhier (http://xilinus.com, http://v2.maptimize.com) - MIT LICENSE - 2015

Bitdeli Badge