Gem for Rails 4.1+ applications that use the excellent Zurb Foundation framework.
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_messageshelper method that uses Zurb Foundation Callout UI.
Add this line to your application's Gemfile:
gem 'foundation-rails', '~> 6.0' # required
gem 'foundation_rails_helper', '~> 3.0'And then execute:
$ bundle- Only Rails 4.1/4.2/5/6, and Foundation 6 are fully supported
- Some features may work with Foundation 5 and older, but results may vary, and markup which exists only for those versions will be gradually removed
- Legacy branches exist for Rails 3, 4.0, and Foundation 5 (see the rails3, rails4.0, and foundation-5 branches). These are not actively supported, and fixes are not retroactively applied, but pull requests are welcome.
- We test against ruby versions 2.1 and up. This gem may still work fine on 1.9.3, but your mileage may vary
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 %>
<%= f.password_field :password %>
<%= f.password_field :password_confirmation %>
<%= f.submit %>
<% end %>| Form | Form with errors |
|---|---|
|
|
To use the built in flash helper, add <%= display_flash_messages %> to your layout file (eg. app/views/layouts/application.html.erb).
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>Field helpers add a label element and an input of the proper type.
f.text_field :namegenerates:
<label for="user_email">Name</label>
<input id="user_name" name="user[name]" type="text">Preventing the generation of labels can be accomplished three ways. To disable on a form element:
f.text_field :name, label: falseFor all form elements, add the option: auto_labels: false to the form helper. To disable for all forms in you project, use the auto_labels config option, see the Configuration section for more information.
Change the label text and add a class on the label:
f.text_field :name, label: 'Nombre', label_options: { class: 'large' }If the help_text option is specified
f.text_field :name, help_text: "I'm a text field"an additional p element will be added after the input element:
<p class="help-text">I'm a text field</p>The 'submit' helper wraps the rails helper and sets the class attribute to "success button" by default.
f.submitgenerates:
<input class="success button" name="commit" type="submit" value="Create User">Specify the class option to override the default classes.
On error,
f.email_field :emailgenerates:
<label class="is-invalid-label" for="user_email">Email</label>
<input class="is-invalid-input" id="user_email" name="user[email]" type="email" value="">
<small class="form-error is-visible">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.
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>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
endTo use a different class for the submit button used in form_for, add a config named button_class:
# Default: 'success button'
config.button_class = 'large hollow secondary button'Please note, the button class can still be overridden by an options hash.
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]If you prefer to not have the form builder automatically generate labels, set auto_labels to false.
# Default: true
config.auto_labels = falseSee the CONTRIBUTING file.
Sébastien Gruhier (http://xilinus.com) - MIT LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent