In this post we are going to implement a responsive web design framework in a Ruby on Rails application in order to provide a mobile-friendly user experience. A mobile-friendly application responds and adapts to the size of the screen so that the most important features are the focus of the available screen real estate. To create this experience, we are going to use a Ruby Gem that I created called bootstrap_jt. This gem will integrate the Bootstrap 3 responsive web framework in your Rails application. It is great for adding the Bootstrap responsive framework to a new or already existing application.
OK, so let’s start with the changing directory into the Rails application. Once you are inside the root of the application you will want to open up your Gemfile.
Add the gem bootstrap_jt to the Gemfile.
# Bootstrap responsive web design framework for your web application.
You can find the ruby gem here at rubygems.org
Go back into your terminal and run bundle
The instructions for implementing the gem can be found in the README of the Github repository. This is where the directions can usually be found for all Ruby Gems. You can get there by clicking the Homepage link on the gem’s rubygems.org page. It is found in the bottom right corner of the rubygem’s page.
Add these two lines to your application.js file in your Assets folder.
# These two lines below 'turbolinks' //= require bootstrap.min //= require npm # The lines go above 'require_tree'
Then add these two lines to your application.css file in the Assets folder.
# These two lines here *= require bootstrap-theme.min *= require bootstrap.min # Put the lines above 'require_tree'
Now that you have taken care of the dependencies for the bootstrap_jt gem by adding it to your Gemfile, adding the appropriate lines in both the application.js and application.css files, and ran the bundle command on your application from the command line it is time to edit the form to introduce responsive form fields.
Currently the code looks like this ->
This is the boiler plate Rails form code that is generated when use the out-of-the-box scaffold generator. The browser rendering looks like this ->
Let’s change that boiler plate code to this.
This changes the browser rendering to look like this. It is responsive. This means that it will adjust to the size of the viewport (the size of the screen). It will look appropriate for a mobile device, a tablet, or a desktop. It also looks current, not like a view from the ’90s.
The autofocus added to the title provides the blue outline around the Title box drawing the user’s attention to it. If you haven’t cancelled out the rails server that you were running, then all you need to do is refresh the page to see the changes to the view after you have changed the code. If you have cancelled out the server, simply restart it with the command rails s
You can adjust the browser window and see how the page adjusts to the size of the available window. If you are using Firefox as your browser, put it in responsive design mode in the developer options. From there, you can choose the most common viewport sizes that you see in today’s modern screen options (mobile, tablet, desk).
This takes care of the form in the rails application. You can follow the same steps for any other forms that you may have in your app. In regards to the rest of the views you can follow the guidance in the Bootstrap documentation to add items such as modals, fixed navbars, panels..etc. in order to provide a good, clean responsive view of your application.