Skip to main content

19 Styling with Bootstrap Sass

Episode 7 · July 7, 2014

Learn how CSS and Javascript frameworks should be added to Rails applications

Gems Frontend Javascript


Resources

Transcripts

When it comes to front-end frameworks and integrating JavaScript libraries to your rails application, there's a lot of different ways that you can do it, sometimes you can download the library directly and install it in your application, in the assets folder, or you can use a gem to handle it, and there's many gems to do that, and different methods. So we're going to talk about integrating Bootstrap in your application, which includes a CSS framework, as well as a bunch of JavaScript helpers to do that. Normally, if you were to download bootstrap, you would come over here and click "Download Bootstrap", which this will download a zip file containing the stylesheets and the JavaScript files that you can copy into your applications assets folder. That's one way of doing it, it's ok to do that. But if you really want to integrate this in your application and always depend upon bootstrap, then you don't necessarily need to have bootstrap inside of your application. It's completely third-party, you're not going to be working on bootstrap, and if you do, you should work on bootstrap directly, not hacking it inside of your application. So this is where ruby gems come in. You have ruby gems that wrap bootstrap and allow you to integrate it into your rails application easily. The reason for this is because those gems will handle upgrading to the latest version of bootstrap seamlessly. You change the version, you upgrade the gem, and voila, you're on the latest version of bootstrap, and your application never has to care how bootstrap is designed or works in order to do that, so you completely separate the concern between those two things. Bootstap's code should be separate in your applications code should be independent of that, so this is why we want to use a gem like bootstrap-sass. Now bootstrap sass is a ruby gem that I like to use in my rails applications, the reason why is because it's extremely lightweight, and there's not a lot of code to it, so it loads up the assets, and that's basically it. It has a handful of helpers but in order to evaluate why this gem is one that I want to use, I'm going to walk you through that, so I've taken a while to read through this gem to figure out if it's something worth using. Because bootstrap doesn't have a lot of ruby logic, it just simply needs to serve up the CSS and JavaScript files. We want a gem that simply does that so if we dive into this gem, we can go into the lib directory and actually take a look at the rails integration here, and see how it does that. So normally we would just dump in the CSS and that would be ok. But because it's in a gem, it need a little bit of ruby code around it to properly integrate it. So we can dive in here into bootstrap-sass.rb file and see that ok this is going to simply load the gem properly, it has a handful of helpers of the paths, there's a couple other helper methods and really not a lot going on, and that's all that's in this file, so there's very little logic going on in here. If we dive into the gem more itself, we see that there's a rails engine to integrate it, they made som sass helper functions, and the ruby gem version, so there's really not a whole lot in here. If we want to dive into it and double check, you can look that ok there's some more path helpers, and that's about it. So these are really good signs that this gem is very lightweight and does exactly what we want from it, because if we were to integrate bootstrap ourselves, we would just copy files in and we'd be off to the races, so some people write gems that add a lot of overhead and things get to be slow and confusing, ant then when there's a bug it's hard to fix. So looking at this one, the code for itself is very simple, they have some rake tasks and templates and tests, but if we look in the vendor folder, you can see that inside of here, it's just the bootstrap files in SASS format, so this is good, it's in SASS which means that we can write, we can change the variables and then change the colors of bootstrap and tweak the settings, so if you want to make it a 16 column grid, you can do that easily. So, in here, if you want to learn how any of bootstrap works, you can dive right in and you know exactly what files contain which thing, so if you want to go into the mixers or the modals or anything like that, you can just simply dive in, and this gem is very transparent, so there's nothing very confusing or hidden away, and it's very simple, which I like. If I'm going to use a gem, I will not use a gem unless I trust that it's straightforward and that I would be able to go fix a bug myself if I came across one. So you want to really trust the gems that you use and not use them arbitrarily because: Oh, I wanted a great bootstrap, I guess I should find a gem for it. DO NOT DO THAT, because that is not a good way to handle things.

So if you want to go to rubygems and download and install this gem in your application, I always recommend grabbing this gemfile line so that you have this version, and most importantly, the version specifier here then make sure that when you run bundle update it will update this version and not include any major version changes.

Now that we've spent some time looking into the bootstrap gem and determining why we want to use it, let's go add the bootstrap gem into one of our applications. I'm going to create a new application, and we're going to install a nav bar from bootstrap, and we're going to go take a look at that right now. If we go over to the components section, we come down to the navbar, we're going to put this inside of a rails application that I'm just going to create from scratch, so we'll go though the whole installation process and then integrate this navbar. So let's hop over to the terminal and create a new rails application.

rails new bookstore

Before we do anything, let's set up a page, so that we have a homepage to look at and we can tell if it's going to be using bootstrap or not. So normally you know there's no CSS, so we'll be able to tell pretty easily weather or not it's working.

rails generate scaffold book name:string description:text

rake db:migrate

config/routes.rb

root to: "books#index"

rails server

We see that we get the regular scaffold styles that come with a rails scaffold. First I think we should delete that so we don't have it to conflict with the bootstrap stylesheets, so we can remove the app/asset/stylesheets/scaffold.css.scss and now if we go back to Chrome, we can refresh and see that all the styles are gone, and this is just the basic stuff that Chrome uses. So if we come over here to the rubygems bootstrap sass tab and we grab the gemfile line, we'll go back to our application and open put the gemfile, and add it at the bottom. Come back to the terminal and run bundle install, and then we'll restart our rails server, refresh the page, and nothing changed. So the gem needs to be installed, but it also needs to be loaded, so if we go back to our terminal, we're going to use the move command to rename our application css stylesheet to one that uses SCSS formatting so that we will import this bootstrap sass gem. So all we have to do is say mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss, and if we go back to our editor and we open that at the bottom here we can use Sass to import the bootstrap stylesheet file which is provided from the bootstraps sass gem that we just installed. So now if we go back to Chrome and refresh, now we have bootstrap's font, bootstrap's color and styles, so this is good, we're almost there. Now we want to integrate this navbar code, so I'm going to copy this, and you'll be able to edit it later, but for now we'll just put in the example. So we want this navbar at the top here on every single page, which means that we want to put this inside of our application layout file. And instead of putting the code directly in this file, it's going to make this file quite a bit bigger than we want, because if you looked at that before, there was a whole lot of lines of code just for the single navbar, so we're going to do is we're going to put this in a partial so that the navbar can be shared between multiple layouts if we happen to decide that for checkoutwe're going to have a different layout, and it will be a little bit different. So to prepare for that, we're going to render a partial, and we're going to call it <%= render partial: "shared/navbar" %>, and this is going to look in the app/views/shared/_navbar.html.erb

mkdir app/views/shared

touch app/views/shared/_navbar.html.erb

And here we can paste in the navbar, and now, that will render on every single page that the application layout is rendered on, so if we come back to Chrome and refresh the page. Voila, now we have our nav bar in every page so if we go to add a new book, we still got the navbar and so on. So we have access to all of bootstrap's components and other so you can do, you know icons, and you can do dropdowns and anything that you see on here, you can take and then integrate it into your application, and all of it's available pretty much immediately. So if you want to use JavaScript for example, you'll do the same thing that we did with the application CSS, although, if we go into the README, we can see that you can use the asset pipeline require to handle it rather than sass to import. So going down to the JavaScript here, you can load all of the bootstrap JavaScript by saying require bootstrap, and we'll copy tha and put in out application.js file and we'll do it right after turbolinks. And now if we come back here, I haven't refreshed the page, so you can see that our dropdowns are working which that is because they need JavaScript, so if we refresh the page and click it now, it has loaded the JavaScript through the asset pipeline, and that is as simple as it is to evaluate and integrate a bootstrap gem into your application.

Transcript written by Miguel

Discussion