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