Halo teman-teman, pada kesempatan kali ini saya ingin berbagi bagaimana cara menginstall framework css Materialize di framework Rails atau Ruby on Rails.

Sebelumnya saya sudah membahas bagaimana cara menginstall framework Bootstrap di Rails atau Ruby on rails, teman-teman bisa melihatnya di sini.

Sebelumnya apakah teman-teman sudah pernah menggunakan framework Materialize di aplikasi yang tidak menggunakan Rails ?

Di Rails ketika kita ingin menginstall sesuatu kita menggunakan package manager yaitu Gem jadi dengan Gem kita akan dipermudah untuk menginstallnya. Langsung saja

Installation

Tambahkan baris kode dibawah ini di Gem file aplikasi Rails kamu.

gem 'materialize-sass', '~> 1.0.0'

Kalau kamu ingin menginstall secara global di laptopmu, kamu bisa menggunakan perintah berikut ini di terminal

gem install materialize-sass

Oke, selanjutnya, setelah menambahkan baris kode di Gem file, silahkan teman-teman jalankan perintah dibawah ini di terminal

bundle install

Tunggu Instalasi selesai, selanjutnya kita akan mencoba menggunakanya di aplikasi kita

Usage

Import Materialize style di app/assets/stylesheets/application.scss, jika sebelumnya extensi application.css silahkan rename menjadi application.scss

@import "materialize";

Karena color schema materialize di deklarasikan di color.scss, jadi silahkan import color.scc juga, dan kamu dapat mengganti warna variabel seperti berikut ini

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

Selanjutnya kita include JavaScript Materialize kita di app/assets/javascript/application.js

//= require materialize

Untuk kemudahan debugging silahkan tambahkan juga baris kode dibawah ini

//= require materialize-sprockets

Icon

Untuk menggunakan icon disini kita mempunyai dua cara, pertama bisa include di head aplikasi kita seperti ini

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

atau kita bisa import juga di app/assets/stylesheets/application.scss menjadi seperti berikut ini

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

atau kalau kita mau iconya secara offline, kita bisa menggunakan baris kode berikut ini di Gem file

gem 'material_icons'

Silahkan jalankan aplikasimu

rails s