Integrating MDbootstrap to Rails 5

index.md

Guide to integrate mdbootstrap to rails5

Preparing a railsapp

1. Create a new rails app

rails new MyNewApp --skip-active-record

2. Add to Gemfile the with the following Gems:

gem 'mongoid', '~> 6.0'
gem 'bson_ext'
gem 'bootstrap'
gem 'jquery-rails'

3. [optional] Install nodejs for ExecJS lets you run JavaScript code from Ruby. Google nodejs installation.

4. Download Mdbootstrap, you should able to get a zip file of MDB.

5. Extract the file and copy the contents of css,js,font and img to the vendor/assets path

6. In vendo/assets/css/mdb.css renamed it to vendo/assets/css/mdb.scss

7. After renaming the file to vendo/assets/css/mdb.scss, edit and find this section

@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin), url("../font/roboto/Roboto-Thin.eot");
  src: url("../font/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../font/roboto/Roboto-Thin.woff2") format("woff2"), url("../font/roboto/Roboto-Thin.woff") format("woff"), url("../font/roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 200; }

@font-face {
  font-family: "Roboto";
  src: local(Roboto Light), url("../font/roboto/Roboto-Light.eot");
  src: url("../font/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../font/roboto/Roboto-Light.woff2") format("woff2"), url("../font/roboto/Roboto-Light.woff") format("woff"), url("../font/roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300; }

@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular), url("../font/roboto/Roboto-Regular.eot");
  src: url("../font/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../font/roboto/Roboto-Regular.woff2") format("woff2"), url("../font/roboto/Roboto-Regular.woff") format("woff"), url("../font/roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400; }

@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Medium.eot");
  src: url("../font/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../font/roboto/Roboto-Medium.woff2") format("woff2"), url("../font/roboto/Roboto-Medium.woff") format("woff"), url("../font/roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500; }

@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Bold.eot");
  src: url("../font/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../font/roboto/Roboto-Bold.woff2") format("woff2"), url("../font/roboto/Roboto-Bold.woff") format("woff"), url("../font/roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700; }

Replace it with the following section

@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin), url(asset-path('roboto/Roboto-Thin.eot'));
  src: url(asset-path('roboto/Roboto-Thin.eot?#iefix')) format("embedded-opentype"), url(asset-path('roboto/Roboto-Thin.woff2')) format("woff2"), url(asset-path('roboto/Roboto-Thin.woff')) format("woff"), url(asset-path('roboto/Roboto-Thin.ttf')) format("truetype");
  font-weight: 200; }

@font-face {
  font-family: "Roboto";
  src: local(Roboto Thin), url(asset-path('roboto/Roboto-Light.eot'));
  src: url(asset-path('roboto/Roboto-Light.eot?#iefix')) format("embedded-opentype"), url(asset-path('roboto/Roboto-Light.woff2')) format("woff2"), url(asset-path('roboto/Roboto-Light.woff')) format("woff"), url(asset-path('roboto/Roboto-Light.ttf')) format("truetype");
  font-weight: 300; }

@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular), url(asset-path('roboto/Roboto-Regular.eot'));
  src: url(asset-path('roboto/Roboto-Regular.eot?#iefix')) format("embedded-opentype"), url(asset-path('roboto/Roboto-Regular.woff2')) format("woff2"), url(asset-path('roboto/Roboto-Regular.woff')) format("woff"), url(asset-path('roboto/Roboto-Regular.ttf')) format("truetype");
  font-weight: 400; }

@font-face {
  font-family: "Roboto";
  src: url(asset-path('roboto/Roboto-Medium.eot'));
  src: url(asset-path('roboto/Roboto-Medium.eot?#iefix')) format("embedded-opentype"), url(asset-path('roboto/Roboto-Medium.woff2')) format("woff2"), url(asset-path('roboto/Roboto-Medium.woff')) format("woff"), url(asset-path('roboto/Roboto-Medium.ttf')) format("truetype");
  font-weight: 500; }

@font-face {
  font-family: "Roboto";
  src: url(asset-path('roboto/Roboto-Bold.eot'));
  src: url(asset-path('roboto/Roboto-Bold.eot?#iefix')) format("embedded-opentype"), url(asset-path('roboto/Roboto-Bold.woff2')) format("woff2"), url(asset-path('roboto/Roboto-Bold.woff')) format("woff"), url(asset-path('roboto/Roboto-Bold.ttf')) format("truetype");
  font-weight: 700; }

Take note that asset-path('roboto/Roboto-Bold.eot') was being used instead of src: url("../font/roboto/Roboto-Bold.eot");, this is because asset-path() will write the location of this assets during precompilation of the SCSS file, adding the correct assets location with fingerprinting.

8. In config/initializers/assets.rb Add the following line

Rails.application.config.assets.precompile += %w( mdb.js mdb.scss )
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf|woff2)\z/

for precomiplation of mdboostraps assets and fonts usef by mdbootstrap

9. Create a controller rails g controller main index, paste some mdbootstrap example code in the app/views/main/index.html.rb

<div style="height: 100vh">
    <div class="flex-center flex-column">
        <h1 class="animated fadeIn mb-4">Material Design for Bootstrap</h1>

        <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>

        <p class="animated fadeIn text-muted">MDB Team</p>
    </div>
</div>

10. edit config/routes.rb, set the main#index to root page as follows:

Rails.application.routes.draw do
  root :to => "main#index"
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

11. Start up your railsapp rails s and open the location of your URL to your app. You should have a working RailsApp with MDbootstrap