In this guide we'll walk through how to integrate the Twitter Bootstrap (commonly referred to as Bootstrap), design framework into our application.

If you've never used Bootstrap before it's a very helpful design framework that gives us a starting point for customizing the look and feel of an application. Why are we using Bootstrap instead of building the HTML/CSS/JS from scratch? I'll answer your question with another question: If you're going to build a house (you're a home builder and a coder?! wow, I'm impressed), would you truly build the house from scratch? Let's step back and see what you would need to do in order to truly build a house from scratch:

1. Buy the wood from the lumber yard... nope, that's not from scratch

2. Go to the forest and cut down your own trees... nope, that's not from scratch

3. Plant the trees so you can have the lumber... nope, that's not from scratch

Are you getting the idea? It's important to take a minute and realize that nothing that we build is truly from scratch. To develop an application from scratch you'd need to create your own web framework, your own programming language, your own compiler, your own version of binary code, etc. etc. etc.

Anytime I hear a developer claim that they built an application from scratch I'm reminded of the astronomer Carl Sagan's quote:

"If you wish to make apple pie from scratch, you must first create the universe"

Sorry for the long answer to your simple question on why we're using the Bootstrap framework, however hopefully I made my point that we're never actually building anything from scratch, we're constantly building on top of the code written by those who came before us, and that's a good thing. I'm always on the lookout for someone who has built something better than I have so that I can learn from it and integrate it into my own projects, and I hope others are doing the same from me.

Now that I have stepped off my soapbox on what building something from scratch really means, let's integrate Bootstrap into our application.

Integrating Bootstrap into a Rails App

We'll start out by adding the gem to our Gemfile:

# Gemfile

gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'

After running bundle we have a list of items to do to complete the integration:

1. Implement the CSS call

2. Implement the JS call

Implement the CSS call

In order for our application to use the sweet styles we'll need to let it know it needs to call the Bootstrap framework in the asset pipeline. Let's first rename the main application stylesheet by running the following command in the terminal:

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss

This is done so that we can use the scss syntax for our stylesheets instead of plain css. Now we need to refactor our main stylesheet code to work with the scss import conventions:

/* app/assets/stylesheets/application.css.scss */

@import "bootstrap-sprockets";
@import "bootstrap";
@import "chosen.css";
@import "fonts.css";
@import "gauge.css";
@import "graph.css";
@import "jquery.fancySelect.css";
@import "main.css";
@import "posts.scss";
@import "select2.min.css";
@import "table.css";
@import "topics.scss";

With this new configuration it's important to note that we'll need to manually @import any new stylesheets that are automatically generated in the future, such as from controller or resource generators. For further reading, checkout Matt Boldt's well written guide on how to handle SCSS code organization in rails. Let's refactor these stylesheets so we will know which files are from the designer and which ones are new styles that we may add in the future. Create two new directories:

mkdir app/assets/stylesheets/template
mkdir app/assets/stylesheets/custom

Now let's organize the files into those two directories so that posts.scss and topics.scss are aded to the custom/ directory and the rest go into the template/ directory, so it should look like this:

Now we'll need to refactor the application.css.scss file import calls:

/* app/assets/stylesheets/application.css.scss */

@import "bootstrap-sprockets";
@import "bootstrap";
@import "template/chosen.css";
@import "template/fonts.css";
@import "template/gauge.css";
@import "template/graph.css";
@import "template/jquery.fancySelect.css";
@import "template/main.css";
@import "custom/posts.scss";
@import "template/select2.min.css";
@import "custom/table.css";
@import "custom/topics.scss";

That's much better and it will make it easier to manage style changes in the future.

Implement the JS call

Since Bootstrap comes with with nice built in JavaScript actions, let's add that into the JS asset pipeline by updating the application.js file, the bottom of the file should now look like this:

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

*Please Note: * the order here is very important, if you place the //= require bootstrap-sprockets call in a different order you'll get some unexpected behavior. This is because the Rails asset pipeline compiles all of the JavaScript code into a single file when the server starts up and if the order is different it can result in conflicts and confusing bugs.

Ok, with all of that in place let's see what our application looks like now, startup the rails server and navigate to localhost:3000:

Nice, that's actually looking like the mock, very well done!

Ok, that's a great starting point for the rest of the design implementation. In the next few lessons we'll start going page by page integrating the design, starting with the registration page.

Resources

• Project code at this commit