Introduction and Rails App Setup
We're going to see how to get bootstrap up and running inside of a rails application. This is going to be a brand new rails application. And for bootstrap, we're actually going to use some themes from a website called Start Bootstrap. There's a lot of themes here that all use bootstrap. So if I go to themes and then I go to landing pages, we're going to choose one of these. So you can see there's a lot of themes and we can work with this grayscale theme. So if I do a preview and download, then I go to live preview, here's the theme.
So we're going to integrate this into our brand new Rails app. So what I want to do is create a new Rails app. So I'm going to do rails new and just call this bootstrap1 and that's going to go ahead and create my Rails application. Once the bundle install is done, I'll change over into my app folder, so bootstrap1. From here I can go ahead and ls and see that I have everything I need. And what I want to do now is open my project up in Sublime Text. You can use whatever editor you normally use. And then I'll just go to my folder and open. All right, so I have all of my application opened here.
Installing the Bootstrap Gem
And what I want to do is make a couple of modifications to get bootstrap into this app. There's two files that are going to be involved. There's the Gemfile and there's an application stylesheet. So here's the Gemfile and we are going to add a gem for bootstrap. So that's just going to be bootstrap-sass. I'll save that.
So the second file is in the app folder then in assets and stylesheets. Here's where you want to modify application.css. The first thing is to rename this to a CSS, that way the pre-processors can make use of this, the ones that are inside of bootstrap-sass. So there's two entries we're going to need here. They're both imports. So we're going to do an @import for bootstrap-sprockets; put a semicolon. Do another @import for straight bootstrap; and semicolon. That's it. That's all we need as far as bootstrap modifications to these files.
Verifying the Installation
And what we need to do next is run bundle install. So that's going to go ahead and pull in these bootstrap gems. So that's done. And now we can run our server and check that we actually have bootstrap. So I'm going to do rails s and run the server. So if you already have your server running, so if maybe you were doing something else inside of your app and your server was running, once you run this bootstrap or bundle install, you'll need to stop your server and restart it for the effect to come in.
So when I go to localhost:3000, here's our main default page that we get with our information about our app. If I click the "About your application's environment", I can go down here and see I'm in the correct folder. So what we're going to have to do is add a file so that we can check it and actually see that bootstrap is being applied. Before we do that, I want to show you what these modifications are that we made earlier. So we have these two imports, and then we have this bootstrap-sass. So if I go out to Google and go ahead and Google bootstrap-sass, we go to GitHub. And here's the details on what bootstrap-sass is all about. And then they have some installation instructions. So you can see we're using this gem, we're not using Sass-Rails. Here's the two imports we had to make. You can see they call out this file here, which we also renamed, we added the correct extension and that was all we needed to do to get it running. So that is where this bootstrap-sass comes from.
Testing Bootstrap on a New Page
I'm going to open another tab in terminal and what I want to do is create a page, an index page, because we don't have any pages inside of our application yet. So I'll do rails g for Generate and I'm going to do controller, I'll call it startup, I'll give it a method of index, and it's also going to create a page for us called index in the startup folder. So I'll run that and then we go back into our Sublime and look at our project. And if I go to views/startup, here's our view page. I'm going to go to this now.
So we're going to check out the text on this and see if bootstrap is actually enabled. And if I go into my config folder and I go into routes, this is where we need to go. So back out to localhost and I will just append this, actually need a different slash here. Let that load. And notice the text here is formatted in bootstrap, so it is working.
Integrating the Theme's HTML
Okay so to get this particular theme, I am going to grab a, actually I'm going to show source first so we can see what we have here. Just move this over. And I'm going to scroll down. On this website in particular, they're kind of all put together the same. So here's our body and under that is where we're going to have our code for this page. Here's the navigation. We can grab this. Notice the container, this container is for the navigation. So if I scroll down, this is the end of the navigation, the end of that particular container. So here's the intro header. Notice they're using another container, so there's multiple containers. But I'm going to grab this nav and go ahead paste this in our project.
I'm going to go into the main layout. This is our shared layout file. And I'll put this right under the body. And I can go back and get the footer. So I'm going to skip the intro header piece, the about, so the about is this one here. I'll just keep going down. This is the download section, which is here. We have the contact which is there, map, here's the footer. So I want to grab this. I want to grab... actually I'm going to grab just this footer and paste that into our application file. So I'm going to go below the yield. The yield is going to be each of our pages and in this case we only have the one page, which is our index.
Now we can paste in everything between footer and also the navigation. So I'm going to grab that. So we go up to this header right here, I'll grab that, go back in here, can remove all of this, and paste. Now if I go back here and refresh, you can see we're getting some differences now. But our text is still formatted, Bootstrap is still working, but we have a few issues that we're going to have to resolve.
Adding the Theme's Custom CSS
And one of them is related to a custom file that's going to be included with this particular theme. So I'm going to go back to our source and let's check out what we might be missing. We might need this css/grayscale. So actually I can grab this custom CSS and it's coming off of this path. So I'm going to go ahead and build that path. And I'll into my application file and paste this here. And grab this path here in the URL, prepend that. And let's make sure that looks fine. It does. I'm going to save.
Let's go back and see what kind of differences we have now. And there you go. So we needed our CSS file and we're pretty much getting this same kind of look. There's seems to be, there's a lot of space here. Let's see what is going on with that.
Adding Fonts and Fixing the Map
So if I go back over here, that was just this map. So if we look and see what did they do with that map. So it looks like this is being generated and all of this. So we have this map section, I believe. Go back into our index. Downloads, contact, yeah, looks like we're missing all that code. Not sure exactly why, but we can copy this right here, copy as HTML, paste that in like that. Save that and go back to our site, refresh, and there's the map.
And I think that is everything. Let's see, download grayscale, let's see if we're missing anything above that. Nope, looks like that is all there. So that was just text and this icon here. Let's see, right there. So what are they doing with that particular piece as well? I want to make sure, as far as our menu at the top, we have this little icon and then this icon in here. So let's see what is happening there. I think that is going to be more to do with these fonts. So if we go back to this file over here and look at the fonts inside of the head section. So let's see, we have this one here, and then we have these Google API fonts which we might want to go ahead and grab. Grab those. So I'm going to copy HTML, go back over here to our application file and paste them in. And then grab, there is another one here. Copy HTML, paste that in.
Integrating Font Awesome & Recap
And now we'll refresh our page, see if that makes any difference. So these icons are still probably coming off of the other fonts, which is going to be Font Awesome. So the way we can handle that is let's Google Font Awesome. All right, here it is. And we can download this, but there's a way to actually access it from the website and we're going to find the particular link to do that. So I'm going to go to Getting Started. Here it is. So this is a CDN that we can use, and I'm going to go back over here and paste that in right there. Save, go back to our site and right here, refresh. And there they are. So those were coming off of Font Awesome.
So now we have a functioning site that is replicating what we did over here with this site as well. And we're using Bootstrap. We didn't have to go out and add any files for Bootstrap; we didn't have to download a Bootstrap library. We simply made the modifications inside of our assets for our stylesheet, two imports. We made the modification in our Gemfile for the Bootstrap gem bootstrap-sass. We ran a bundle install to do the updates for our gem, and if the server is running, you just need to restart that and start it back up. And then you should see Bootstrap enabled and working on your website.
So that's just a quick look at how to add Bootstrap as a gem and then also how to basically clone another website that's using Bootstrap.
