Bulma integration

A work in progress for Bulma integration. This works as a basic, any improvements would be highly appreciated.

Currently these things won't work and I think i have a bit of a hacky implementation, but its a start:

• booleans
• attributes for associated models with fields_for won't work
• I'm unable to generate html for input checkboxes like in the commented section.

Step 1

Create inside /config/initializers/simple_form_bulma.rb

SimpleForm.setup do |config|
  #config.generate_additional_classes_for = ['field']

  config.wrappers :default, tag: 'div', class: '', error_class: 'has-error' do |b|
    b.use         :placeholder
    b.optional    :maxlength
    b.optional    :pattern
    b.optional    :min_max
    b.optional    :readonly

    b.wrapper tag: 'div', class: 'field' do |ba|
      ba.use :input, class: 'input'
      ba.optional :hint, wrap_with: { tag: 'p', class: 'help' }
      ba.optional :label, class: 'label', wrap_with: { tag: 'label', class: 'label' }
    end

    #
    #   %label.checkbox
    #     %input{:type => "checkbox"}/
    #     I agree to the
    #     %a{:href => "#"} terms and conditions
    # 
    # 

  end

  config.wrappers :boolean, tag: 'div', class: 'control', error_class: 'has-error' do |b|
    b.wrapper :label, tag: "label", class: "checkbox" do |ba|
      ba.use :input, class: 'checkbox'
      ba.use :label_text
      ba.use :hint, wrap_with: {tag: 'p', class: 'help'}
    end
  end

  class StringInput < SimpleForm::Inputs::StringInput
    def input(wrapper_options)
      template.content_tag(:div, super, class: 'control')
    end
  end

  class TextInput < SimpleForm::Inputs::TextInput
    def input_html_classes
      super.push('textarea')
    end
  end

end

Step 2

Currently Im rendering my forms like so:

= simple_form_for @organisation, wrapper: :default, defaults: { wrapper: false } do |f|
  = f.input :email,
            placeholder: 'Email',
            input_html: { value: current_organisation.email },
            label: false
  = f.button :submit, "Save »",
             class: 'button is-primary is-pulled-right'

Wrapper examples

Wrapper for inline input

config.wrappers :inline_input, tag: "div", class: "field is-horizontal" do |b|
  b.wrapper :label, tag: "div", class: "field-label is-normal" do |bl|
    bl.optional :label, class: "label"
  end
  b.wrapper :input, tag: "div", class: "field-body" do |bi|
    bi.wrapper :input, tag: "div", class: "field" do |bf|
      bf.use :input, class: "input"
      bf.optional :hint, wrap_with: {tag: "p", class: "help"}
    end
  end
end

Alternative Implementation

Take a look at https://gist.github.com/JuanVqz/f8b4941ba627341ae6d298f64e576869 for a more complete, drop in, solution