Using Material Design in Ruby on Rails application

There is a lot of buzz around material design and there is a huge adoption worldwide. So what the hell material design is?

Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

To know more about material design, checkout here

There are many frameworks out there but we like Materialize most. It is a modern responsive front-end framework based on Material Design which speeds up development, focuses on user experience and it is very easy to work with.

You can find latest version of CDN at cdnjs. Optionally you can also get the latest release by NPM or Bower.

Ruby on Rails community is very active and hardly leave any JS without wrapping it in a gem. So there is not surprise that there is a gem for Materialize named ‘materialize-sass’.

First off, create a new rails application (or open an existing application.)

rails new myApp

Now open your Gemfile and add the gem,

gem ‘materialize-sass’ 

Ensure that the sass-rails gem is presented in your Gemfile.

Now bundle the app,

bundle install 

Import Materialize styles in application.scss

@import “materialize”;

Require Materialize javascripts in application.js

//= require jquery
//= require materialize-sprockets

All set! Now no need to add any fonts, javascript files or css files anymore.

You can checkout the demo application on github repository.

At BoTree, we build web and mobile apps to add value to our client’s business. We align ourselves to ensure that our client benefits the most out of our engagement. Drop us a line to discuss how can we help take your business to the next level. Talk to us.