Bootstrap for 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.

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.

Since this book is targeted for Rails developers, 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.

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

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:

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:

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

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:

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:

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

Obviously, the application doesn't look insanely great. The table that has been presented is extremely confusing and needs some CSS styling. So, let's proceed to style our Rails application.

We will use the application's default CSS file to add and modify the styles:

Currently, you will find three different files: application.css, scaffold.css.scss, and todos.css.scss. The first file is an application level CSS file. Anything you write inside it will be applied to the whole application. The next two files are Sass files. Rails uses SASS to apply styles to the application. These SASS files are compiled in the CSS files and included in the application on the go.

We will be using a normal CSS file without any SASS to apply styles to our Todo application. Let's first proceed and analyze the HTML source code of our application. The screenshot is as follows:

You can see that all the CSS files are loaded alphabetically here. This can be a serious problem where overriding CSS is concerned. We want our CSS file to be at the end. This will allow us to override the application level styles at some places in future.

So, let's rearrange the CSS files here.To do so, follow the given steps:

The require_self command includes the application.css file in the application. If we inspect the HTML source file now, we should see that there are only two CSS files included: application.css and styles.css. Hence, we are now safe to write CSS styles for the application.

Redesigning the Todo application

In this section, We will write all the CSS files to redesign without the use of any framework. This will help us to better understand the amount of CSS code we have to write at the end for styling simple links and other HTML elements.

We are going to redesign our existing Todo application to something that looks like the following screenshot:

The preceding screenshot displays the redesigned version of the home page. As you can see, the list of TODO activities are now displayed properly in the middle of the screen inside a table-like structure. Even the action links (Show, Edit, and Destroy) have been redesigned to look like 3D buttons. Let's look at the redesigned version:

The preceding screenshot displays the redesigned version of the New Todo page. The form has been redesigned and a background color has been applied to it, as follows:

The preceding screenshot shows the redesigned version of the Edit TODO screen, which is the same as the New Todo screen. The only difference here is the auto fill feature that fills the fields as per the data available in the database. The input fields are more spacious with a bigger font size for properly displaying the text contained in them. Let's see the screenshot of the View Todo page:

The preceding screenshot displays the redesigned version of the View Todo page. We have kept this page simple and clear for better readability. In all the pages, we have centered the content of the website.

Oh! That's lots of designing! Don't worry. We will get through it easily.

It is generally considered as a good practice to organize the designing process before jumping into it. In our Todo application, we have three different views:

• Home page to list out all Todos: This is at http://localhost:3000/todos

• New Todo forms and Edit Todo forms: They both are the same view, which is reachable through two different types of URLs

• Show View Todo: It displays particular TODO details

Let's begin by styling the Homepage:

1. Open styles.css, which we have recently created. All the styles that we are going to write should be written in this file.

2. We will first clear the browser default margin and padding using the universal selector in CSS (*). So, our CSS for this will be:

   *{
   margin: 0;
   padding: 0
   }

3. Let's style the title of the page first. If you check out the HTML source code of the page, you will see that it is an H1 element. So, our CSS for this will be:

   h1{
   padding: 20px;
   text-align: center;
   color: #5093C2;
   }

   The preceding code makes the title appear in the center of the page. It also adds a light blue color to it. We have also created some space around it using the padding property of CSS. Refresh your page to verify it.

4. It's time to decorate the table element. Our CSS for it will be:

   table{
     width: 800px;
     margin: auto;
   text-align: center;
   }

   The preceding code makes the table position to the center of the browser. First, we applied a width of 800px to it and then we applied an auto positioned margin to it. Since the browser now knows the width of the table element, it will automatically divide the extra space on each side of it. This will make our table centered to the browser screen. The last property, text-align is used to align the text present inside the table.

5. Let's apply some more styles to the elements present inside the table:

   td, th{
     padding: 10px;
     border: 1px solid #888888;
   }

   In the preceding CSS code, we have applied styles to the td and th elements of the table element. We created some space around the text using padding. We also applied a border to each cell. It is a solid border of 1px width and color #888888.

6. It's time to design the application's links. We will try to make them appear like a button so that it appears more clickable. Our CSS for it will be:

   a{
   display: block;
   text-decoration: none;
   width: 100px;
   margin: 10px auto;
   padding: 5px;
   text-align: center;
   background: #ccc;
   color: #444;
   font-size: 20px;
   box-shadow: 4px 4px 0px #888;
   font-weight: bold;
   }

Links <a> are inline HTML elements. Hence in the first line, we have made it look like a block-level element using the display property. Now, we can apply width and margin to it. Just like we did to our table element; we will also apply a particular width and make all the links appear centered to their parent elements. We have also applied a padding of 5px to create space around the link text.

To color the links, we applied background to it, and to make the text appear more distinct in this background, we applied a color property to it. We have also played with the shadow of the button to make it appear more 3D.

Make sure to refresh the browser screen to see the changes we are continuously applying. Hope you are enjoying the process of designing the application.

We have finally designed the home screen. The form is still not styled! Let's do it now:

1. Click on the New Todo file and let's style it:

   form{
     width: 300px;
     margin: auto;
     background: #ccc;
     padding: 20px;
     border: 1px solid #444;
   }

   We applied proper width to the form and made it appear at the center of the screen. We have also given a decent background color to it. Padding and border is also applied to make it look more spacious and flat.

2. Next, we have to design the labels and input fields. If you check out the HTML source of this page, you will see that every label, and its associated input field, is wrapped inside a div which has a field class. Remember that these classes and the HTML structures are not written by us. These have been autogenerated by Rails. We are just working with the CSS file.

3. Now, we will use the field class to apply style to the elements present inside the New Todo view. Here we will design the label, input field, and textarea element:

   .field{
     padding: 10px 0;
   }
   
   .field label{
   	font-weight: bold;
   }
   
   .field input, .field textarea{
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 5px;
     font-size: 18px;
     width: 280px;
   }

   We applied a decent space inside the field with div element. Here, we have give two different values to the padding property. The first value is for creating spaces to the top and bottom, whereas the next value will be used for the left and right side.

4. Next, we applied style to the label element of the field element. We have made it appear bold using the font-weight property. Lastly, we gave both the input fields and textarea the same set of CSS styles. We made them look spacious using padding. A border property is applied to get rid of the browser default border around the input and textarea elements. We also applied border-radius to make the corners a little rounded. Finally, we fixed the width of both the textarea and input elements so that they appear properly aligned.

5. It's time to design the last element in this HTML page, the Create Todo button:

   .actions input{
     padding: 8px;
     border: 1px solid #CCC;
     border-radius: 5px;
     font-size: 18px;
     width: 280px;
     background: #83B5D8;
     color: #444;
   }

   Most of the CSS styles that we applied here are similar to what we have applied to the input and textarea element. Here, we have added two extra properties, background and color to make it look different and stand out properly in the form.

6. We have successfully designed the New Todo and Edit Todo pages. We are now only left with the Show Todo page. So, without any further delay, let's first check out the page. Click on the Show link.

   Most of the content is already styled by us. We are only left with designing the text on this page, the code is as follows:

   p{
     width: 350px;
     font-size: 20px;
     margin: auto;
     padding: 10px 0;
     color: #444;
   }
   
   p#notice{
     color: #76a3da;
   }

   We applied a fixed width to the p element and made it appear to the center of the screen using the margin property. We also applied a decent font size to them. Now, let's separate them from each other using the margin and padding properties.

This page is also shown after the New Todo or Edit Todo pages with a notice at the top. This element has an id element, which is used to show the status, whether a new todo was successfully created or an existing todo was successfully updated. Using CSS, we have applied style to it. Make sure that you are not giving any space between p and #notice in the preceding CSS code. We are targeting the p tag, which has an id, #notice, so spaces shouldn't be present between the selectors.

Congrats! We have successfully completed designing the whole application.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

The application which we have created was so basic that we did not write a single line of code for its logic part. We didn't even touch the HTML layout of the application. You have seen how complex the CSS styling can be at some places, such as designing a link. The CSS which we have written here is very poorly organized. We have a target element level selector at many places to apply styles to them. This is considered as a very poor way of designing.

Our CSS code was not segregated into various, smaller parts. All the styles were written directly in one file, styles.css. In the coming chapters, we will see how we can use SASS to apply styles to our Rails applications. Using SASS, we can bring logic to the CSS codes.

We will also overcome the difficulties of styling each and every element in our Rails application using Bootstrap. You will realize how easy it can become for a Non-CSS developer to design a high-end application using Bootstrap. You won't write a single piece of CSS code when using Bootstrap. Its developers have written a bunch of CSS codes for you.

The main intention of this chapter, 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.

In the next chapter, we will get our hands dirty with Bootstrap. We will learn what it is, and how it can help to design a Rails application quickly. We will also learn how to integrate Bootstrap with the Rails application.