Topic: MD Bootstrap Ruby on Rails tutorial

Jakub Strebeyko
staff posted 4 years ago
Kudos go to kenc138 for preparing the original version of this guide.
Today you will learn how to get your Ruby on Rails project totally MDBed!
Ruby language syntax is easy to understand, while Rails help developers increase their productivity by allowing them to focus on designing and implementing features, and not worrying about setting up server connections or planning out the folder structure. Last but not least, the framework is open source.
If you notice an error, or something below is not clear to you - we invite you to visit our support forum.
What will I learn?
- Where to drop all your favorite scripts and styles
- How to inlude them into Rails assets pipeline, so they are ready to go
- How to test SCSS compilation and make sure it all goes smoothly
- Having resources loaded only when necessitated by targeted views
Note, that the guide takes you from the bottom up, and its two first steps are to be omitted by people who already have their projects ready.
1. Get yourself some Rails:
Make sure you have all it takes to start a new project:
- 1.1 Open up a command line prompt. On macOS open Terminal.app, on Windows choose "Run" from your Start menu and type 'cmd.exe'. Any commands prefaced with a dollar sign $ should be run in the command line. Verify that you have a current version of Ruby installed:
ruby -v
- 1.2 Rails requires Ruby version 2.2.2 or later. If the version number returned is less than that number, you'll need to install a fresh copy of Ruby.
- 1.3 A number of tools exist to help you quickly install Ruby and Ruby on Rails on your system. Windows users can use Rails Installer, while macOS users can use Tokaido. For more installation methods for most Operating Systems take a look at ruby-lang.org.
- 1.4 If you are working on Windows, you should also install the Ruby Installer Development Kit.
- 1.5 You will also need an installation of the SQLite3 database. Many popular UNIX-like OSes ship with an acceptable version of SQLite3. On Windows, if you installed Rails through Rails Installer, you already have SQLite installed. Others can find installation instructions at the SQLite3 website. Verify that it is correctly installed and in your PATH:
The program should report its version.sqlite3 --version
- 1.6 To install Rails, use the gem
install
command provided by RubyGems:gem install rails
- 1.7 To verify that you have everything installed correctly, you should be able to run the following:
rails --version
- 1.8 If it says something like "Rails 5.2.1", you are ready to continue!
2. Preparing the project:
rails new yourappnamehere
The CLI will then inquire about your RubyGems password - if you don't have one, no problem - just press CTRL + C.
cd yourappnamehere
To install gems, simply hit
bundle install --path vendor/bundle
from within the project root directory.
3. Time to get the basic gems! It your project does not use them already, go to ./Gemfile
and add these, preferably around lines 29 / 30:
gem 'jquery-rails'
gem 'font-awesome-rails'
4.
bundle install
5. Time to get real & get your MDB package somewhere handy.
Create /vendor/assets/javascirpts/
directory in your rails project, and move these bad-boys inside:
- bootstrap.js
- mdb.js
- popper.min.js
6. Create, similarly, a /vendor/assets/stylesheets/
directory, and place our blazing styles inside for them to reign:
- bootstrap.css
- mdb.css
7. Adding JavaScript
Ok, now, the doctor is in! Time to have some little work done on the JavaScript Manifest. It defines what scripts exactly get processed in the so-called "asset pipeline" - it is the crucial point for attaching your custom scripts to a Rails project. Go, look it up at app/assets/javascripts/application.js
, and since you are there, rearrange the scripts list so it looks as follows:
//= require jquery
//= require popper.min
//= require bootstrap
//= require mdb
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
These might look weird and commented out, but fear not! This is the file Rails uses to know what and from where to take and concatinate, fingerprint and attach to whatever you're building.
8. Adding CSS
All right, plot twist time! There is also a CSS Manifest, that does the same things, but with stylesheets! It lives at app/assets/stylesheets/application.css
, give it a knock and see what can it do for you today. Make sure the asset list looks like this:
*= require font-awesome
*= require bootstrap
*= require mdb
*= require_tree .
*= require_self
A default project pipeline is ready to compile Sass, too! It is really handy by itself, but also in debugging - in case of some CSS inconsistencies, the stylesheet pipeline may fail silently, resulting in not having them included into the outputted file. For debugging of this process, you can try to precompile .scss
files using Rake:
rake assets:precompile --trace
9. Adding Roboto Font
Time for something entirely different! We want the font files to be attached to the end product of our work, but there is no Font Manifest this time. Create a app/assets/font/
directory if it's not there and put the /roboto
font folder inside. Now navigate to config/application.rb
and add the following to line 13:
config.assets.paths << Rails.root.join("app", "assets", "font", "roboto")
10. Tweaking the CSS file
Since we moved the stylesheets into a different project, our CSS url()
function points to a wrong place! To address this change, we have to modify our mdb.css
file a little. Find instances of @font-face
and replace their url()
function parameter with appropriate directory, also - get rid of the local
syntax for Rails to have no silly ideas:
@font-face {
font-family: Roboto;
src: url(/assets/Roboto-Thin.eot);
src: url(/assets/Roboto-Thin.eot?#iefix) format("embedded-opentype"),
url(/assets/Roboto-Thin.woff2) format("woff2"),
url(/assets/Roboto-Thin.woff) format("woff"),
url(/assets/Roboto-Thin.ttf) format("truetype");
font-weight: 200
}
11. Running your project
Almost there! Make sure that the template (by default found at vendor/bundle/ruby/2.3.0/gems/railties-5.2.0/lib/rails/templates/rails/welcome/index.html.erb
) is bootstrapped with our output files! To do so, see whether it contains appropriate tags:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
There is a possibility you might have to alter project's default Content Security Policy, so it allows for attached scripts and stylesheets.
12. Using MDB add-ons
It is what we just did here - getting assets on starting blocks and connecting them to the assets pipeline. Copy img
and mdb-addons
to /vendor/assets
and update your config/application.rb
file to include these:
config.assets.paths << Rails.root.join("vendor", "assets", "img")
config.assets.paths << Rails.root.join("vendor", "assets", "mdb-addons")
Similarly as the Roboto font, here we also need to tweak urls in our CSS, replacing ../img/
with /assets/
:
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url(/assets/lightbox/default-skin.png) 0 0 no-repeat;
-webkit-background-size: 264px 88px;
background-size: 264px 88px;
width: 44px;
height: 44px; }
...
.pattern-1 {
background: url("/assets/overlays/01.png"); }
...
.carousel .carousel-control-prev-icon {
background-image: url(/assets/svg/arrow_left.svg); }
13. Extra: getting specific MDB JavaScript Modules work on specific pages only:
In your application.html.erb
file, use embedded Ruby to define a body class as follows:
<%= yield %>
Now, if there is a request for the home#index
route, The <body>
tag for this page will be render as <body class="home index">
in the DOM. Now it is possible to target the DOM with JS using .home.index
selector. If, say, you would like a Date Picker being uploaded only in a particular page of your app, you can do this by surrounding the contents of your vendor/assets/javascripts/custom.js
with a wrapper like this:
$('.home.index').ready(function(){
$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
});
$('.some-other-class').someMDBMethod({
// Code here
});
});
When your app loads, application.html.erb
loads once, and so do all of your assets. That way <body>
tag has dynamically changing class names that depend on controller#action
, what changes is <%= yield %>
, dynamic substitutes of which are properly scoped to their respective views.
Congratulations!
You are running a MDB Rails project now!
Chase Tran
commented 2 years ago
Kelly Garvy
pro commented 4 years ago
This is definitely helpful, but can you expand on the <%=yield%> and use it in a full example?
Clayton MacKnight commented 2 years ago
It should be:
<body class="<%= controller_name %> <%= action_name %>"> <%= yield %> </body>
Clark Jason Ngo
commented 4 years ago
Incomprehensible. Please make a video to show how to do this.
Mikołaj Smoleński staff commented 2 years ago
Unfortunately, there is no plans for preparing a video tutorial for this article. What exactly is incomprehensible for You? Best regards
Joy Ayitey
commented 3 years ago
Unable to get it functional with rails 6. Kindly update the guide and add video example if possible.
Mikołaj Smoleński staff commented 2 years ago
Thanks for your remarks. I'm adding the task for writing a new article to our list of creative ideas.
Note that the Roboto font is no longer with the package, you can use the CDN link:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
- Category: jQuery
- Specification: MDB jQuery
Some more rails examples would be great - how about integrating a datepicker into a view's .erb file or showing a notification on a model event?
Mikołaj Smoleński staff commented 2 years ago
Is the need for datepicker integration still valid? Best regards