Integrate Less Version of Bootstrap-Material-Design to Rails Project

Integrate LESS version of Bootstrap-Material-Design to Rails Project

First install Rails, see: http://guides.rubyonrails.org/getting_started.html. Then you can create a new Rails app by running the following command in your console:

>> rails new material

The above command will create a new material directory, navigate to this directory (>> cd material). Now open the Gemfile and remove the Sass bundle and at the Less bundle(s):

#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby

Then run bundle install again. Now navigate to your public directory (>> cd public) and run the following command:

>> bower install bootstrap-material-design

Now you can create a controller called "welcome" with an action called "index", by running the following command:

>> bin/rails generate controller welcome index

The preceding command create among others the app/views/welcome/index.html.erb file. Open the app/views/welcome/index.html.erb file and write out the content like that shown beneath into it (according https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test.html):

<!-- Your site -->
<h1>You can add your site here.</h1>
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
</p>
<!-- Your site ends -->

And after that make sure that the content of the ./app/views/layouts/application.html.erb file look like that shown beneath:

<!DOCTYPE html>
<html>
<head>
  <title>Material</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

<!-- Your site ends -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>

</body>
</html>

Finally rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.less and write down the following content into it:

@import "../../../public/bower_components/bootstrap-material-design/less/material-fullpalette.less";
@color: red;
h1 {
color: @color;
}

Now you can run >> bin/rails server and open http://localhost:3000/welcome/index in your browser. The result now should look like that shown in the figure beneath:

Sample Image

How can I add the bootstrap-material-design package into webpack?

yep, you should do, as @jkukul said:

Install bootstrap-material-design:
npm install --save bootstrap-material-design
Add css loader to your webpack config:
module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };

also, you should install style-loader and css-loader packages

 npm install style-loader css-loader --save-dev

and add extract text webpack plugin:

npm i extract-text-webpack-plugin --save

add this line before module.exports:

var ExtractTextPlugin = require ('extract-text-webpack-plugin');

and add this param inside module.exports:

styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader')

probably, it would appear jQuery undefined error :
I fixed it that way

npm i jquery --save

and add plugins inside module.exports:

plugins: [
     new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery"
})]

here is my total webpack.config file (hope it will be helpful!):

var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require ('extract-text-webpack-plugin');
module.exports = {  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),  devtool: 'eval',  entry: [    'webpack-dev-server/client?http://localhost:3000',    'webpack/hot/only-dev-server',    './src/index'    ],  output: {    path: path.join(__dirname, 'dist'),    filename: 'bundle.js',    publicPath: '/static/'  },
  plugins: [    new webpack.HotModuleReplacementPlugin(),    new webpack.ProvidePlugin({         $: "jquery",         jQuery: "jquery"    })
  ],  module: {    loaders: [{      test: /\.js$/,      loaders: ['react-hot', 'babel'],      include: path.join(__dirname, 'src')    },    {      test: /\.css$/,      loader: "style-loader!css-loader"    }
  ],  resolve: {    extensions: ['', '.js', '.jsx','.css'],    modulesDirectories: ['node_modules']  }  }};

Bootstrap Material Design cdn

Try to change the tags to

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

Combining angular material with twitter bootstrap without conflicts

It is better not to mix Bootstrap and Angular Material because bootstrap's grid system (as of version 3~) is based on CSS display table and Angular Material is using display flex. So as suggested in this answer you're likely to get CSS conflicts and your application size will increase.

If you need better browser support and you're using Bootstrap, I have written Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme. It eliminates the dependency on jQuery and bootstrap's JavaScript and supports form validation using ng-messages.

You can install from bower via bower install abm.

initialize Bootstrap Material Design in Ember.js App

I found the answer. According to the Ember Documentation, we can use an Application Instance Initializer which can run code when our App is loaded.

Application instance initializers are run as an application instance is loaded. They provide a way to configure the initial state of your application, as well as to set up dependency injections that are local to the application instance (e.g. A/B testing confurations).

So, I just generated a new instance initializer using ember-cli

ember generate instance-initializer bootstrap-material

And called the Bootstrap Material Design JS function:

// app/instance-initializers/bootstrap-material.js
import Ember from 'ember'

export function initialize(applicationInstance) {
    Ember.$.material.init();
};

export default {
    name: 'bootstrap-material',
    initialize: initialize
};

That is all I have done to get it working. Hope it helps.

Integrate Less Version of Bootstrap-Material-Design to Rails Project