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

问题

I am using this gem bootstrap-material-design which is a sass version of https://github.com/FezVrasta/bootstrap-material-design library but recently I have noticed that sass version is no longer maintained.

Problem i am facing with this gem is that it doesn't turn buttons and flash messages to material styled.

One solution as suggested here: https://github.com/FezVrasta/bootstrap-material-design/issues/535 is to use LESS version but I dont know how to Integrate the LESS version of this Library. anyone has done this already ?

UPDATE:

In case anyone is looking to add Bootstrap-Material-Design to their site without using any framework or server side language like Ruby, PHP etc..., just with HTML5, CSS3 and JS. they can follow these instructions below:

To install and download bootstrap-material folder

bower install bootstrap-material-design

Link bootstrap css and material css minified file under head tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-material-design/dist/css/material-fullpalette.min.css">

Link Javascript files

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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>

Lastly You have to initialize some material component with this script at the bottom of your body

<script>
$(document).ready(function() {
  $.material.init();
});
</script>

回答1:

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:

回答2:

If you intend to use this gem by Aufree, then it actually is quite simple following the documentation.

Add the gem to your gem file and also add less rails

gem 'less-rails' 

gem 'bootstrap-material-design'

Then bundle.

Now, go to your application.js file and add

//= require bootstrap-material-design

and then proceed to the application.css file and add

*= require bootstrap-material-design

after that restart your server. Should be good to go

来源：https://stackoverflow.com/questions/29340248/integrate-less-version-of-bootstrap-material-design-to-rails-project

标签

css

ruby-on-rails

twitter-bootstrap-3

less

bootstrap-material-design