Rails materialize setup

Readme.md

1. Add the required gem

2. Bundle install

3. Ensure the `simple_form_materialize.rb initializer is well set

4. Add .js & `.scss files

5. Override materialize variables if needed

6. Initiliaze materialize components that needs to be initilaized in js usign `init_materialize.js

7. Check form_example.html.erb

_variables.scss

// app/assets/stylesheets/_variables.scss
// NB: overiding colors can be tricky since 
// you can override materialize components by overriding https://github.com/mkhairi/materialize-sass/blob/master/app/assets/stylesheets/materialize/components/_variables.scss
// if you want to overrided materialize color, you need to exaclty replicate this structure: https://github.com/mkhairi/materialize-sass/blob/master/app/assets/stylesheets/materialize/components/_color.scss

/* -------------------------------------
 * Fonts
 * ------------------------------------- */

  $medium-size: 16px;
  $nav-size: 14px;
  $text-size: 14px;
  $small-size: 12px;
/* -------------------------------------
 * Colors
 * ------------------------------------- */
// Scheme
$brand-color: #D23333;

$c-red: #ff053a;
$c-red-light: lighten($c-red, 30%);
$c-navy-blue: #08112a;
$c-blue: #0f1a53;
$c-blue-opaq: rgba(15, 26, 83, 0.8);
$c-sky-blue: #42d0f8;
$c-sky-blue-dark: darken($c-sky-blue, 10%);
$c-turquoise: #00899d;
$c-turquoise-opaq: rgba(0, 137, 157, 0.8);
$c-orange: #ffba5a;
$c-orange-opacity: rgba(255, 186, 90, 0.2);
$c-purple: #c765b1;
$c-green: #00c23c;
$c-light-green: #54b979;
// Gray scale
$c-gray-darker:  darken(#434343, 20%);
$c-gray-dark:    darken(#434343, 10%);
$c-gray:         #434343;
$c-gray-light:   #ababab;
$c-gray-lighter: #d3d4d6;

application.js

// app/assets/javascript/application.js
//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require materialize-form

application.scss

// app/assets/stylesheets/application.scss
// Graphical variables
@import "config/variables";
@import "config/materialize_variables";

// External libraries
@import 'materialize';

form_example.html.erb

<%= simple_form_for @resource do |f| %>
  <%= f.error_notification %>
  <%= f.input :date_picker_attribute, as: :string, input_html: { class: 'datepicker' }, wrapper_html: { class: 's4' } %>
  <%= f.input :attribute_2, wrapper_html: { class: 's12' } %>
  <%= f.input :file_attribute, as: :file, label: 'Your label', wrapper_html: { class: 's6' } %>
  <%= f.button :button, class:'btn', data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
<% end %>

Gemfile

gem 'materialize-sass'
gem 'materialize-form'

init_materialize.js

// app/assets/javascript/init_materialize.js
// You need to js-init some materialize component to be able to use them
// Here are some we often use
$(document).ready(function() {
  window.materializeForm.init();
  $('select').material_select();
  Materialize.updateTextFields();
  $('.datepicker').pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
  });
  $('ul.tabs').trigger('tab_change', function(e){   
  });
  $('.tooltipped').tooltip({delay: 200});
});

simple_form_materialize.rb

# /config/intializers/simple_form_materialize.rb
# Ensure you have a simple_form_materialize install that looks like
# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn'
  config.boolean_label_class = nil
  config.boolean_style = :inline
  config.item_wrapper_tag = :p

  config.wrappers :materialize_form, tag: 'div', class: 'input-field col', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :input
    b.use :label
    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_text, tag: 'div', class: 'input-field col', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :input, class: 'materialize-textarea' 
    b.use :label
    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_boolean, tag: 'p', class: 'col', error_class: 'has-error' do |b|
    b.use :html5
    b.optional :readonly

    b.use :input
    b.use :label
    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_toggle, tag: 'p', class: 'col switch', error_class: 'has-error' do |b|
    b.use :html5
    b.optional :readonly

    b.use :label
    b.wrapper tag: 'label' do |ba| 
      ba.use :input
      ba.use :tag, tag: 'span', class: 'lever'
    end
    
    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_radio_and_checkboxes, tag: 'div', class: 'col', error_class: 'has-error' do |b|
    b.use :html5
    b.optional :readonly
    b.use :label
    b.use :input
    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_file_input, tag: 'div', class: 'file-field input-field col', error_class: 'has-error' do |b|
    b.use :html5

    b.wrapper tag: :div, class: 'btn' do |ba| 
      ba.use :tag, tag: :span, text: :label_text
      ba.use :input
    end

    b.wrapper tag: :div, class: 'file-path-wrapper' do |ba|
      ba.use :tag, tag: :input, class: 'file-path validate', type: 'text', placeholder: 'Browse...'
    end

    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.wrappers :materialize_multiple_file_input, tag: 'div', class: 'file-field input-field col', error_class: 'has-error' do |b|
    b.use :html5
    
    b.wrapper tag: :div, class: 'btn' do |ba| 
      ba.use :tag, tag: :span, text: :label_text
      ba.use :input, multiple: true
    end

    b.wrapper tag: :div, class: 'file-path-wrapper' do |ba|
      ba.use :tag, tag: :input, class: 'file-path validate', type: 'text', placeholder: 'Upload one or more files'
    end

    b.use :error, wrap_with: { tag: 'small', class: 'error-block red-text text-darken-1' }
    b.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end

  config.default_wrapper = :materialize_form
  config.wrapper_mappings = {
    text: :materialize_text,
    check_boxes: :materialize_radio_and_checkboxes,
    radio_buttons: :materialize_radio_and_checkboxes,
    file: :materialize_file_input,
    boolean: :materialize_toggle
  }
end