Ruby on Rails: Materialize CSS
August 29, 2023Getting Started
gem 'materialize-sass'
Using the Example Repo
- A little out of date with devise
- Inconsistent UI, see the login vs landing examples
- Materialize doesn't properly reset all the browser styles (likely out of date rails implementation)
- random theme color on load is cool, not always easy to read
app/assets/config/manifest.js
//= link_tree ../images
//= link application.css
//= link application.js
app/assets/stylesheets/application.scss
@import 'reset';
@import 'materialize';
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize/extras/nouislider';
@import "datatables";
@import 'style';
@import "devise";
@import "custom";
app/assets/javascripts/application.js
//= require jquery
//= require materialize/extras/nouislider
//= require materialize-sprockets
//= require datatables
//= require init
//= require activestorage
app/views/layouts/_header.html.slim
title
| Example
meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /
meta content="width=device-width, initial-scale=1, maximum-scale=1.0" name="viewport" /
= csrf_meta_tags
= stylesheet_link_tag 'https://fonts.googleapis.com/icon?family=Material+Icons'
= favicon_link_tag 'favicon.png'
= stylesheet_link_tag 'application', 'data-turbo-track': 'reload', media: 'all'
= javascript_include_tag 'application', 'data-turbo-track': 'reload'