read

twitter-bootstrap is pluggable css suit provided by twitter.
To know more about how to get started on it click here.

Below post will help you out in getting started bootstrap css with rails app. One need to add below files to helpers directory.
MainForm can be used as base version of form builder and can be overriden for its subsequent use inside other custom form builders.

  1. Main Form
    <div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'># app/helpers/main_form.rb

</div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>class MainForm < ActionView::Helpers::FormBuilder # NestedForm::Builder
</div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'> CSS = {
</div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> :label => 'label-control',
</div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> :hint => 'hint',
</div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> :hint_ptr => 'hint-pointer',
</div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> :error => 'help-inline',
</div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> :field_error => 'error',
</div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> :main_class => 'clearfix'
</div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'> }
</div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> FIELDS = %w(radio_button check_box text_field text_area password_field select file_field collection_select email_field date_select)
</div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'> def main_class(error=nil)
</div></div><div data-line='15' class='code-highlight-row numbered'><div class='code-highlight-line'> return CSS[:main_class] unless error
</div></div><div data-line='16' class='code-highlight-row numbered'><div class='code-highlight-line'> [CSS[:main_class], CSS[:field_error]].join(' ')
</div></div><div data-line='17' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='18' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='19' class='code-highlight-row numbered'><div class='code-highlight-line'> def required(name)
</div></div><div data-line='20' class='code-highlight-row numbered'><div class='code-highlight-line'> object.class.validators_on(name).map(&:class).include?(ActiveModel::Validations::PresenceValidator) rescue nil
</div></div><div data-line='21' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='22' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='23' class='code-highlight-row numbered'><div class='code-highlight-line'> def cancel(options={})
</div></div><div data-line='24' class='code-highlight-row numbered'><div class='code-highlight-line'> link = options.fetch(:return, "/")
</div></div><div data-line='25' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.content_tag(:a, "Cancel", :href => link, :class => "btn_form button np_cancel_btn #{options[:class]}")
</div></div><div data-line='26' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='27' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='28' class='code-highlight-row numbered'><div class='code-highlight-line'> def submit(value="Save", options={})
</div></div><div data-line='29' class='code-highlight-row numbered'><div class='code-highlight-line'> options[:class] = "send_form_btn #{options[:class]}"
</div></div><div data-line='30' class='code-highlight-row numbered'><div class='code-highlight-line'> super
</div></div><div data-line='31' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='32' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='33' class='code-highlight-row numbered'><div class='code-highlight-line'> def label_class
</div></div><div data-line='34' class='code-highlight-row numbered'><div class='code-highlight-line'> {:class => CSS[:label]}
</div></div><div data-line='35' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='36' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='37' class='code-highlight-row numbered'><div class='code-highlight-line'> def label_tag(attribute, arg)
</div></div><div data-line='38' class='code-highlight-row numbered'><div class='code-highlight-line'> # Incase its a mandatory field, the '*' is added to the field.
</div></div><div data-line='39' class='code-highlight-row numbered'><div class='code-highlight-line'> txt = arg[:label] && arg[:label].to_s || attribute.to_s.titleize
</div></div><div data-line='40' class='code-highlight-row numbered'><div class='code-highlight-line'> txt<< '*' if(arg[:required] || required(attribute)) && arg[:required] != false
</div></div><div data-line='41' class='code-highlight-row numbered'><div class='code-highlight-line'> label(attribute, txt, label_class)
</div></div><div data-line='42' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='43' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='44' class='code-highlight-row numbered'><div class='code-highlight-line'> def error_tag(method_name, attribute)
</div></div><div data-line='45' class='code-highlight-row numbered'><div class='code-highlight-line'> errs = field_error(method_name, attribute)
</div></div><div data-line='46' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.content_tag(:span, errs.first, :class => CSS[:error]) if errs.present?
</div></div><div data-line='47' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='48' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='49' class='code-highlight-row numbered'><div class='code-highlight-line'> def field_error(method_name, attribute)
</div></div><div data-line='50' class='code-highlight-row numbered'><div class='code-highlight-line'> return if @object && @object.errors.blank?
</div></div><div data-line='51' class='code-highlight-row numbered'><div class='code-highlight-line'> return @object.errors[attribute] if method_name != 'file_field'
</div></div><div data-line='52' class='code-highlight-row numbered'><div class='code-highlight-line'> @object.errors["#{attribute.to_s}_file_name"] | @object.errors["#{attribute.to_s}_file_size"] | @object.errors["#{attribute.to_s}_content_type"]
</div></div><div data-line='53' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='54' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='55' class='code-highlight-row numbered'><div class='code-highlight-line'> def hint_tag(txt)
</div></div><div data-line='56' class='code-highlight-row numbered'><div class='code-highlight-line'> hintPtr = @template.content_tag(:span, '', :class => CSS[:hint_ptr])
</div></div><div data-line='57' class='code-highlight-row numbered'><div class='code-highlight-line'> hintT = @template.content_tag(:span, txt + hintPtr, {:class => CSS[:hint]}, false)
</div></div><div data-line='58' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='59' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='60' class='code-highlight-row numbered'><div class='code-highlight-line'> def spinner_tag
</div></div><div data-line='61' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.image_tag('spinner.gif', :class => :spinner,:id => :spinner)
</div></div><div data-line='62' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='63' class='code-highlight-row numbered'><div class='code-highlight-line'>end</div></div></pre></div></figure>

ZeroForm is custom form builder which is inherited from main_form and its going to be actually used inside forms.
Feel free to make custom form related changes inside this

# app/helpers/zero_form.rb
class ZeroForm < MainForm
# Overridden label_class here as we dont need class to be applied
def label_class
{}
end
def self.create_tagged_field(method_name)
define_method(method_name) do |attribute, *args|
arg = args.last && args.last.is_a?(Hash) && args.last || {}
# Bypass form-builder and do your own custom stuff!
return super(attribute, *args) if arg[:skip] && args.last.delete(:skip)
errT = error_tag(method_name, attribute)
labelT = label_tag(attribute, arg)
mainT = super(attribute, *args)
baseT = @template.content_tag(:div, mainT + errT)
hintT = hint_tag(arg[:hint]) if arg[:hint]
spinnerT = spinner_tag if arg[:spinner]
allT = labelT + baseT + spinnerT + hintT
@template.content_tag(:div, allT, :class => main_class(errT))
end
end
FIELDS.each do |name|
create_tagged_field(name)
end
end

In order to use Nested Forms you need to extend MainForm with NestedForm Builder

Integrate NestedForm with FormBuilder

class MainForm < NestedForm::Builder
end

View Form

<div class='code-highlight'><pre class='code-highlight-pre'><div data-line='1' class='code-highlight-row numbered'><div class='code-highlight-line'>= form_for @address ||= Address.new, :builder => ZeroForm do |f| </div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'> = f.text_field :street_address </div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'> = f.text_area :detail_address, :rows => 2 </div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> = f.text_field :city </div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> = f.select :state, %w(US IN AUS UK UKRAINE) </div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> = f.submit 'Save & Continue', :class => 'btn primary' </div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> = link_to 'Skip ยป', '#'</div></div></pre></div>

Blog Logo

Sandip Ransing


Published

Image

Fun On Rails

Journal of a Web Developer #ruby #rails #JS

Back to Overview