Code Monkey home page Code Monkey logo

foundation_rails_helper's Introduction

Foundation Rails Helper Build Status

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_messages helper method that uses Zurb Foundation Callout UI.

Installation

Add this line to your application's Gemfile:

gem 'foundation-rails', '~> 6.0' # required
gem 'foundation_rails_helper', '~> 3.0'

And then execute:

$ bundle

Compatibility

  • 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

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 %>
  <%= f.password_field :password %>
  <%= f.password_field :password_confirmation %>

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

Flash messages

Flash-message

Usage

Flash Messages

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

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

Submit Button

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

f.submit

generates:

<input class="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="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.

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

Submit Button Class

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

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]

Auto Labels

If you prefer to not have the form builder automatically generate labels, set auto_labels to false.

# Default: true
config.auto_labels = false

Contributing

See the CONTRIBUTING file.

Copyright

Sébastien Gruhier (http://xilinus.com) - MIT LICENSE

foundation_rails_helper's People

Contributors

adriancuadros avatar bitdeli-chef avatar chilian avatar cndreisbach avatar collimarco avatar copiousfreetime avatar dgmstuart avatar djkz avatar dropletzz avatar dsandstrom avatar dyatlov avatar erictheise avatar jbhannah avatar jbigler avatar jconley88 avatar jeffse avatar joewoodward avatar keilmillerjr avatar mattgibson avatar michaelwhi avatar oriolgual avatar patricklindsay avatar potomak avatar schopenhauer avatar sgruhier avatar shingara avatar sonicblend avatar toommz avatar travishaynes avatar werebus avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.