In this article by Syed Fazle Rahman, author of the book Bootstrap for Rails,we will learn how to present your application in the best possible way, which has been the most important factor for every web developer for ages. In this mobile-first generation, we are forced to go with the wind and make our application compatible with mobiles, tablets, PCs, and every possible display on Earth.

Bootstrap is the one stop solution for all woes that developers have been facing. It creates beautiful responsive designs without any extra efforts and without any advanced CSS knowledge. It is a true boon for every developer.

we will be focusing on how to beautify our Rails applications through the help of Bootstrap. We will create a basic Todo application with Rails. We will explore the folder structure of a Rails application and analyze which folders are important for templating a Rails Application. This will be helpful if you want to quickly revisit Rails concepts.

We will also see how to create views, link them, and also style them. The styling in this article will be done traditionally through the application’s default CSS files. Finally, we will discuss how we can speed up the designing process using Bootstrap.

In short, we will cover the following topics:

• Why Bootstrap with Rails?
• Setting up a Todo Application in Rails
• Analyzing folder structure of a Rails application
• Creating views
• Styling views using CSS
• Challenges in traditionally styling a Rails Application

(For more resources related to this topic, see here.)

Why Bootstrap with Rails?

Rails is one the most popular Ruby frameworks which is currently at its peak, both in terms of demand and technology trend. With more than 3,100 members contributing to its development, and tens of thousands of applications already built using it, Rails has created a standard for every other framework in the Web today.

Rails was initially developed by David Heinemeier Hansson in 2003 to ease his own development process in Ruby. Later, he became generous enough to release Rails to the open source community. Today, it is popularly known as Ruby on Rails.

Rails shortens the development life cycle by moving the focus from reinventing the wheel to innovating new features. It is based on the convention of the configurations principle, which means that if you follow the Rails conventions, you would end up writing much less code than you would otherwise write.

Bootstrap, on the other hand, is one of the most popular frontend development frameworks. It was initially developed at Twitter for some of its internal projects. It makes the life of a novice web developer easier by providing most of the reusable components that are already built and are ready to use. Bootstrap can be easily integrated with a Rails development environment through various methods. We can directly use the .css files provided by the framework, or can extend it through its Sass version and let Rails compile it.

Sass is a CSS preprocessor that brings logic and functionality into CSS. It includes features like variables, functions, mixins, and others. Using the Sass version of Bootstrap is a recommended method in Rails. It gives various options to customize Bootstrap’s default styles easily.

Bootstrap also provides various JavaScript components that can be used by those who don’t have any real JavaScript knowledge. These components are required in almost every modern website being built today.

Bootstrap with Rails is a deadly combination. You can build applications faster and invest more time to think about functionality, rather than rewrite codes.

Setting up a Todo application in Rails

I assume that you already have basic knowledge of Rails development. You should also have Rails and Ruby installed in your machine to start with.

Let’s first understand what this Todo application will do. Our application will allow us to create, update, and delete items from the Todo list. We will first analyze the folders that are created while scaffolding this application and which of them are necessary for templating the application.

So, let’s dip our feet into the water:

1. First, we need to select our workspace, which can be any folder inside your system. Let’s create a folder named Bootstrap_Rails_Project. Now, open the terminal and navigate to this folder.
2. It’s time to create our Todo application. Write the following command to create a Rails application named TODO:

   rails new TODO

3. This command will execute a series of various other commands that are necessary to create a Rails application. So, just wait for sometime before it stops executing all the codes. If you are using a newer version of Rails, then this command will also execute bundle install command at the end. Bundle install command is used to install other dependencies.

The output for the preceding command is as follows:

Now, you should have a new folder inside Bootstrap_Rails_Project named TODO, which was created by the preceding code. Here is the output:

Analyzing folder structure of a Rails application

Let’s navigate to the TODO folder to check how our application’s folder structure looks like:

Let me explain to you some of the important folders here:

• The first one is the app folder.
• The assets folder inside the app folder is the location to store all the static files like JavaScript, CSS, and Images. You can take a sneak peek inside them to look at the various files.
• The controllers folder handles various requests and responses of the browser.
• The helpers folder contains various helper methods both for the views and controllers.
• The next folder mailers, contains all the necessary files to send an e-mail.
• The models folder contains files that interact with the database.
• Finally, we have the views folder, which contains all the .erb files that will be complied to HTML files.

So, let’s start the Rails server and check out our application on the browser:

1. Navigate to the TODO folder in the terminal and then type the following command to start a server:

   rails server

   You can also use the following command:

   rails s

2. You will see that the server is deployed under the port 3000. So, type the following URL to view the application:

   http://localhost:3000.

   You can also use the following URL: http://0.0.0.0:3000.

3. If your application is properly set up, you should see the default page of Rails in the browser:

Creating views

We will be using Rails’ scaffold method to create models, views, and other necessary files that Rails needs to make our application live. Here’s the set of tasks that our application should perform:

• It should list out the pending items
• Every task should be clickable, and the details related to that item should be seen in a new view
• We can edit that item’s description and some other details
• We can delete that item

The task looks pretty lengthy, but any Rails developer would know how easy it is to do. We don’t actually have to do anything to achieve it. We just have to pass a single scaffold command, and the rest will be taken care of.

Close the Rails server using Ctrl + C keys and then proceed as follows:

1. First, navigate to the project folder in the terminal. Then, pass the following command:

   rails g scaffold todo title:string description:text completed:boolean

   This will create a new model called todo that has various fields like title, description, and completed. Each field has a type associated with it.

2. Since we have created a new model, it has to be reflected in the database. So, let’s migrate it:

   rake db:create db:migrate

   The preceding code will create a new table inside a new database with the associated fields.

3. Let’s analyze what we have done. The scaffold command has created many HTML pages or views that are needed for managing the todo model. So, let’s check out our application. We need to start our server again:

   rails s

4. Go to the localhost page http://localhost:3000 at port number 3000.
5. You should still see the Rails’ default page. Now, type the URL: http://localhost:3000/todos.
6. You should now see the application, as shown in the following screenshot:
7. Click on New Todo, you will be taken to a form which allows you to fill out various fields that we had earlier created. Let’s create our first todo and click on submit. It will be shown on the listing page:

It was easy, wasn’t it? We haven’t done anything yet. That’s the power of Rails, which people are crazy about.

Summary

This article was to brief you on how to develop and design a simple Rails application without the help of any CSS frontend frameworks. We manually styled the application by creating an external CSS file styles.css and importing it into the application using another CSS file application.css. We also discussed the complexities that a novice web designer might face on directly styling the application.

Resources for Article:

Further resources on this subject:

• Deep Customization of Bootstrap [article]
• The Bootstrap grid system [article]
• Getting Started with Bootstrap [article]