Rails 6 and Daemonite's Material UI

README.md

Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4. This gist describes how to integrate this into a Rails 6 application.

First setup Bootstrap 4 as descrided in this gist.

$ yarn add daemonite-material

# app/javascript/packs/application.js
...
import 'daemonite-material/js/material';

$(document).on('turbolinks:load', function() {
  $(
    '.floating-label .custom-select, .floating-label .form-control',
  ).floatinglabel();

  // ...
});

# app/javascript/packs/styles.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '~daemonite-material/assets/scss/material';
// Remove the bootstrap import, it's already included by daeomonite-material.

.textfield-box {
  .form-control {
    border-bottom: {
      left-radius: 0;
      right-radius: 0;
    }
  }
  .invalid-feedback,
  .form-text {
    padding-left: $textfield-box-padding-x;
  }
}

$ bin/webpack-dev-server
$ bin/rails s