Join Kevin Skoglund for an in-depth discussion in this video Stylesheets, part of Ruby on Rails 4 Essential Training.
In this movie, we will learn how to use asset pipeline to add stylesheets to our Rails project. If we're using asset pipeline, which you should, stylesheets should be kept in app/assets/stylesheets. If you weren't using asset pipeline, then you would put them in public/stylesheets. I like the fact that asset pipeline stores these assets with our application code in the app directory. The two go hand in hand. Stylesheets should end in .css, unless you're using Sass, in which case they would end in .css.scss.
We'll talk a little more about Sass a little later. For now, let's add two stylesheets to our project in this location. So the two stylesheets that I want to add are files that are right here, public.css and admin.css. Those are going to be included in the exercise files. You can find them there. If you don't have the exercise files, I'll make sure that you can see the content of these files so that you can pause the movie and copy it down if you want. Now the location we're going to put those is going to be in app > assets and then inside stylesheets. You can see that there are a number of stylesheets already in there.
This is the manifest file that we saw earlier, application.css. And then we have four style sheets that it generated for us when we were generating each of our controllers. Those are just empty placeholder stylesheets. They don't have anything there. We can delete them, we can keep them and use them, it's up to us. I'm going to leave them for now. I'm going to take public and admin and just drag those into that stylesheets folder. Alright, so let's take a look at public first. We'll just open that up. So it's a pretty simple stylesheet, defines some basic tags up here at the top.
And then if we scroll down a little further, you'll see that we've got the structure. So we've got the header, the main part, the navigation, the footer, and then here's some more navigation styles a little further on, and finally, content h2 at the bottom. So those are the styles that we're going to be using for the public stylesheet. Let's close that up. Let's take a look at admin.css. This is going to have some, also some content information here, as well as things that are relevant only to the admin area like logging in, actions that you can perform.
If we scroll down a little further, you'll see that we've got crud. So here's the crud that we're going to be doing, our notices, back-links, form-buttons, some of the actions you'll recognize from crud, index, show, edit, new. And then, let's just go down a little more. We've got our zebra striping right here, we've talked about that earlier, and then that status tag code that we used at one point, and then some code for displaying errors on our forms. We'll be doing that a little later on. So all of that code is here in my admin.css.
And to top it, notice that this file should load after public.css. Alright, so we can close both of those up. Now, once we have our stylesheet in the right place, we need to make sure that it's being included by a manifest file. We talked about manifest files in the last movie, application.css is our manifest file. Let's open that up and you'll see it already has this require_tree directive in it, require_tree and then a period, that means the current directory. So it's telling you to require all the files that are in the current directory. However, remember, require_tree loads files in an unspecified order.
It's important that public.css file load before admin.css. So, therefore, we'll need to specify it before calling require_tree. So we'll just add a new directive here. And this one is going to be require and then public. That's all we have to do. I'm going to go ahead and just be explicit about both of them, require admin. So now, it's going to load any CSS that's in this file, then require the public CSS and the then admin CSS, and then everything else that is in this folder will be included after that.
That's those other empty placeholder CSS files that we have. Rails gives us a helper method to help us output the stylesheet link tag. Here's a standard HTML tag. Here's the Rails helper that allows you to generate that same tag. It's a lot shorter, a lot cleaner, a lot less to remember. Notice that it's not called stylesheet tag, it's called stylesheet link tag. Link is important. It's actually the name of the HTML tag. That's how you can help remind yourself to include it, stylesheet link tag. And then the argument that we pass in is the name of the manifest file that we want it to include.
Not the stylesheet, the manifest file. Now what's great about this helper is that it does more than just write the HTML that you see above. It knows whether we're in development or production. And based on that environment, it adjusts its behavior and the path to get to our assets. Now, by default, this is going to generate an HTML tag where the media attribute is equal to screen. That's the default. So, if we want it to be media all, just like we have shown there, we're going to want to provide that as an argument. Now that we've seen how easy it is, let's write a stylesheet link in our project.
So, the right place to add this stylesheet is going to be in our layout. If we go back and we take a look at our layout, we're going to open up admin.html.erb and you'll see that here is the head of our document and that's the place that we declare this stylesheet link tag. I'm going to take out the old style information because that's included in this new stylesheet and then I'm just going to paste in our helper that we just saw, stylesheet_link_tag, make sure that you output it, you need the equal sign, and then we call the name of the manifest file, application, and then media all.
Let's save that. That will now load up our manifest file, which will in turn load up all of the CSS files that are listed underneath it, which includes the two files that I'm looking for. Let's close it up and try it out in our browser. Let's close that. We'll go to the command line. And from the root of our Rails application, we'll launch our server. And then we'll go to Firefox and let's open up localhost:3000/subjects. Look at that. I get all of my style. And you can click around between the different pages and see those styles as well.
Now, we just used plain CSS for these styles, but we could have used Sass. We won't discuss how to use Sass in this training, but I will tell you what it is. Sass is short for Syntactically Awesome Stylesheets and it's a scripting language that gets interpreted into plain old CSS. It's very similar to CSS, but it has some extra features and that's really where the power of it is and why people like it. You can have nested style rules, variables, mixins, selector inheritance.
If you ever wish that you can have variables or do math calculations in your CSS, then you should check out Sass. And you can do that at sass-lang.com. That's the website you can find out more information. If you want to use Sass in your Rails project, it requires the sass-rails gem. And at the very beginning of the training, we commented out that gem so that it would not load and we would not be using Sass. If you decide you want to use it, you just need to uncomment that line and then run bundle install to get the new gem and have it installed and working and then you can start using Sass in your Rails project.
But for our purposes in this training, we're going to stick with basic CSS.
- Why use Ruby on Rails?
- Installing Ruby on Rails on Mac and Windows
- Rendering templates and redirecting requests
- Generating and running database migrations
- Creating, updating, and deleting records
- Understanding association types
- Using layouts, partials, and view helpers
- Incorporating assets using asset pipeline
- Validating form data
- Authenticating users and managing user access
- Architecting RESTful applications
- Debugging and error handing
Skill Level Beginner
1. What Is Ruby on Rails?
2. Installing Ruby on Rails on a Mac
3. Installing Ruby on Rails on a Windows Machine
4. Getting Started
5. Controllers, Views, and Dynamic Content
6. Databases and Migrations
7. Models, ActiveRecord, and ActiveRelation
9. Controllers and CRUD
10. Layouts, Partials, and View Helpers
13. Data Validation
14. User Authentication
15. Improving the Simple CMS
16. REST and RESTful Routes
17. Debugging and Error Handling
18. Introducing More Advanced Topics
Next steps1m 40s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.