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?
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:
2. Preparing the project:
The CLI will then inquire about your RubyGems password – if you don’t have one, no problem – just press CTRL + C.
To install gems, simply hit
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:
4.
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:
6. Create, similarly, a /vendor/assets/stylesheets/ directory, and place our blazing styles inside for them to reign:
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:
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:
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:
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:
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:
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:
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:
Similarly as the Roboto font, here we also need to tweak urls in our CSS, replacing ../img/ with /assets/:
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:
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:
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!
This content was originally published here.