Skip to content

Instantly share code, notes, and snippets.

@bazzel
Last active December 13, 2019 16:06
Show Gist options
  • Save bazzel/0226bf815c9018388ae2e7e3bc438c57 to your computer and use it in GitHub Desktop.
Save bazzel/0226bf815c9018388ae2e7e3bc438c57 to your computer and use it in GitHub Desktop.
Rails 6 and Daemonite's Material UI

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment