Creating a Responsive Rails 5 Web Application with Bootstrap

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.

We will do this in the simple blog Rails application that we created in this post. It is available to fork from this techBytes.io Github repository.

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.

gemfile_screenshot

Add the gem bootstrap_jt to the Gemfile.

gem ‘bootstrap_jt’

# Bootstrap responsive web design framework for your web application.

bootstrap_jt_gem_in_gemfile

You can find the ruby gem here at rubygems.org

Go back into your terminal and run bundle

bundle_in_terminal

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'

dependecnies_insert_for_javascript

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'

applicationcss_file_dependencies_for_bootstrap_jt

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 ->

rails_form_code

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 ->

rails_apps_fields_browser

Let’s change that boiler plate code to this.

rails_bootstrap_code_form

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.

rails_bootstrap_browser_view

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.

Nice work implementing and code on!

Advertisements

One thought on “Creating a Responsive Rails 5 Web Application with Bootstrap

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: