Add style sheets to view templates - Ruby on Rails Tutorial

- [Presenter] In this chapter, we're going to learn to work with assets in Ruby on Rails, starting with style sheets. There are two ways that we can work with style sheets in Ruby on Rails. The first is dead simple. You can just write a basic style sheet and put it in your public directory and then add a link in your layout to refer to it. It's that simple. It's just a basic HTML style sheet. The second way is a feature in Rails called Asset Pipeline. Asset pipeline offers a number of benefits. It can catenate style sheets together, which reduces the number of browser requests and allows those files to be cached. It also compresses and minifies the files removing white space and comments. And it pre compiles the files, so all that's done ahead of time and that pre compilation also allows us to write our style sheets in other languages, besides CSS, for example, SASS. And it does something called asset fingerprinting. Asset fingerprinting is a clever way to force browsers to keep cached assets up to date. What it does is it takes the file contents and hashes them to come up with a unique number. We call it a fingerprint. And then it appends that to the file name. Now, if the file changes, that fingerprint will change. So when the HTML goes to load the style sheet, it will load the new version because it has a new file name. It's very clever. In order to use style sheets in Asset Pipeline, there are four basic steps we need to make sure we follow. The first is that the asset precompile list needs to include a manifest file. The second step is that the manifest file needs to include all of the style sheets that should be processed and concatenated together. And then those style sheets can contain the various styles that we want to use for the website. And then we need to have a style sheet link tag in our layout that loads the compiled style sheet onto the page. If you're using Asset Pipeline, the style sheets will be kept in app, assets, style sheets, and the file name should end in .css unless you're working with SAS. And those file names end in .scss. What is SASS? SASS is short for syntactically awesome stylesheets. And it's a scripting language that gets interpreted into CSS. It's very similar to CSS, but it has some extra features. Such as nested rules and variables. You can read all about SAS by going to their website at sass-lang.com. Let's look at our Rails app. Let's start not with our assets directory, but by going to the config directory. In the config directory inside initializers is a file called assets.rb. And I want you to notice lines 11 to 14 here. This is where we make sure that our manifest file is going to be precompiled. If it's not, we want to add it to this list that's maintained right here. Application.css is the default manifest. So it's already included by default. We don't need to add anything. But if we wanted to have a separate manifest for admin, then we would have admin.css, and we would want to add it here. You would just uncomment this line and make sure it was listed. But since we're using the default one, we're good there. Our manifest is included in the precompiled list. That was step one. Now let's go to assets style sheets, and that's where our style sheets are stored. Here's that manifest file. The important part of the manifest file are these last lines down here. Now it looks like this is all commented out, but these are actually instructions. The first require tree with a dot after it is saying, take the current directory and load in everything in there. Everything in this current directory. So all of these files that are in here, demo, pages and subjects, those will all get loaded in in alphabetical order. And then after that, it will require itself the manifest file, meaning that any styles that we add down here below would be included. Now as a best practice, you really don't want to add anything below here. It's better to put them in their own file. It's up to you, how you divide up your style sheets. And every time you generate a new controller from the command line, Rails will add a matching stylesheet at the same time. I'm going to take demo and I'm going to just rename it as general. Inside here, now we can put some styles that would be included. So I'm going to go over to our views, into our layout for application layout. And you'll remember that we added some inline styles for header, content and footer. I'm just going to take those styles out of here. I'll cut them. And we'll create a new style with all of those in there. And I'll just clean that up a bit by adding some line returns. And then I'll take all of those and let's copy them because footer is almost identical except that instead of margin bottom it's margin top. And then let's add div content. And that just had a minimum height of 400 pics. Okay, so now I've got those styles defined there. I don't need them to be defined in line anymore. Take all of these out. Okay, so now let's prove that it's all working. So we followed the first three steps. The fourth step was to have a style sheet link tag at the top of our page. And Rails gives us a helper to help with that. Style sheet link tag. And here I'm calling the name of that file that's being pre compiled, it's called application. That's the manifest file. Even though my styles are in general, they get loaded in that one common file. And then I've got media all. Don't worry about data turbo links, track. That's just another of Rails that allows request to load really quickly. Once that's all in place, now I can come over here and run my server. Rails S and then we'll load the page again, and you can see nothing changed. Now, it took away the inline styles that were there, but they still loaded just fine, because they're now in my style sheet. And we can also just take a look using tools, web developer inspector, and up here in the head We scroll down and we can see that style sheet, it's right here. Now the style sheets are going to be stored in assets. That's in the public directory, inside a folder called assets. And here you can see it's called application dot debug dash, and then it has that fingerprint after it and it's .css, even though I wrote it in the sass file, it gets converted to CSS. On development, Rails actually cheats a little bit. That asset is not actually there. If you go look for this directory, it doesn't exist. Development fakes it. In production though, it would be there. It would be an actual file residing in that directory. However, development does all the file processing with every request, because we're not that worried about speed when we're developing. But in production, we don't want to take the time to do all about asset processing. So it's going to assume that the assets have already been precompiled. So how do you precompile them? Well from the command line, you'll want to make sure that your Rails environment is set to production. And then you'll issue a command to tell it to pre compile, bundle, exec rails assets, colon, pre compile, and that will do all the pre compilation and put a file into that assets directory. If you're using a tool to help you deploy to production, like a lot of people do. Capistrano being a very popular one, then it will do this step for you. It'll automatically precompile those assets. If not, you'll want to do it on your own, because production is going to assume the file is already there.