Añadir Materialize

Sobre Materialize:
Documentación Materialize


La instalación será como indica en su web, a través de su gema:

Agregar la línea en el gemfile:

gem 'materialize-sass'

Después se correrá en bundle istall en la terminal para la instalación.

Una vez instalada la gema, se renombrará a application.sccs nuestra hoja de estilos principal que se encuentra en app/assets/stylesheets/ debido a que materialize trabaja sobre SASS y es por eso que la extensión debe quedar como SCCS

Dentro de esta hoja, importaremos los estilos, únicamente agregando la línea:

@import "materialize";


**En caso de que lo anterior no funcione, dentro del mismo directorio de stylesheets crearemos un nuevo archivo llamado materialize.scss y dentro se copiará el siguiente código:

@charset "UTF-8";

// Mixins
@import "materialize/components/prefixer";
@import "materialize/components/mixins";
@import "materialize/components/color";

// Variables
@import "materialize/components/variables";

// Reset
@import "materialize/components/normalize";

// materialize/components
@import "materialize/components/global";
@import "materialize/components/icons-material-design";
@import "materialize/components/grid";
@import "materialize/components/navbar";
@import "materialize/components/roboto";
@import "materialize/components/typography";
@import "materialize/components/cards";
@import "materialize/components/toast";
@import "materialize/components/tabs";
@import "materialize/components/tooltip";
@import "materialize/components/buttons";
@import "materialize/components/dropdown";
@import "materialize/components/waves";
@import "materialize/components/modal";
@import "materialize/components/collapsible";
@import "materialize/components/chips";
@import "materialize/components/materialbox";
@import "materialize/components/forms/forms";
@import "materialize/components/table_of_contents";
@import "materialize/components/sideNav";
@import "materialize/components/preloader";
@import "materialize/components/slider";
@import "materialize/components/carousel";
@import "materialize/components/date_picker/default.scss";
@import "materialize/components/date_picker/default.date.scss";
@import "materialize/components/date_picker/default.time.scss";


Después, en la propia hoja de application.scss se añadirá el require para que llame a la nueva hoja que se creó:

*= require materialize


Por último, para tener función de todos los elementos JavaScript dentro de app/assets/javascripts abriremos el application.js añadiremos también el require:

//= require materialize-sprockets 


Y después, se hará el llamado a la función select:

$(document).ready(function() {
$('select').material_select();
});


Para hacer funcionar los iconos, en la vista que se usarán (o en el layout de application.html) se agregará la referencia de las fuentes de google:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">