[MUSIC] In this lecture we're going to discuss where to place styling in our Asset Pipeline and Gulp Environment. We're not going to discuss styling itself, just structurally where we're going to place it in both environments. Because although I'm going to go light early on in the styling areas, as soon as we add HTML files, there are going to be many students in the class who are going to want to start adding styling to their pages, because they're going to publish things to websites with their names on it. So we need to know where you can put that information that you mastered in course 4. All right, lots of places to go. One thing I'd like to point out, is I'll try to keep styling to an absolute minimum, and try to go for an n functionality, but we at least ought to put one sample styling in place. Just in case, that other people, when you want to go do the styling, you know where the files are located in order to place that information. Okay so, what I'm going to do is just add some background styling to the overall page. If you remember, the spa-demo.css file within spreadsheets is our css manifest within acid pipeline, and Rails. We could add our CSS to this location, but this is a manifest file. It's meant to point to things that have the definition in there. So what I want to do is create a folder. SPA Demo, which is in parallel to what's on the JavaScript side, to whole things that are in my application. And I'm going to start with one new file called layout.css. And in that file I'm going to set the background color, save it. Declare and include, with more like an asset pipeline. Syntax for including the spa-demo layout, after boot strap, and now when we refresh our page. We get a different color, okay, sample styling in place. So now when we go to put that identical layout CSS in place on the gulp side, the file is identical. But when we go into that manifest that we were creating on the gulp side, we just say import spa-demo/layout. And then if we peek at the 8080 that came up when we changed that file, when Gulp saw the change, we see that we also have that same color background. Okay. CSS looking like it's working. It may be worth noting that in the spa-demo CSS, our stuff should be at the bottom in layout css. And then the source maps that we included. This should also provide a pointer so that if we ever need to know in source code why is something that value. Let's go take a look at this. So if we inspect it and we say 'body, why is body that color? Well, it says layout.css. It does not say spa-demo.css. Isn't that cool and that's because of the source mapping that we added in our gulp definitions. And then when we go to deployment, this will all be minified. So in summary we define a CSS manifest file to the application server for our page to reference and then from that manifest we can list our individual CSS files, full of our CSS styling and we are done. In the Gulp Environment we designed a similar capability that paralled the Asset Pipeline on purpose. In the CSS manifest file we listed out CSS files and then designed a Gulp task in order to compile and merge our CSS with the vendor CSS into a single style CSS. However, with that concatenated file we wanted to have some sensibility about things. We wanted to know where our styles came from in our development environment. So we included file maps that we included way back if you remember but you don't have to remember. It's there and so pretty much from this point forward, when I show a CSS file it really doesn't matter whether it's in Asset Pipeline or Gulp Environment it will be handled pretty much functionally the same. And we want to go with an overall goal of leaving our CSS outside of the manifest and put them in included files. What's next? Well, let's get back to functionality. Let's go ahead and list our resources on the webpage now that we have a full end-to-end skeletal web application that we can start filling in the pieces for.