1.2 Using CSS Libraries

Hello and welcome to the first lesson of this course where you'll learn a little bit about Node.js, NPM. And how to use these to install some of the CSS libraries from this course. Now, I say some libraries, because a few of them will be installed by linking directly to a CSS file. But whenever that's not available, we'll be using NPM. So, let's get started. First of all, what is Node and what is NPM? Well, without getting into too much detail, Node.js is a JavaScript runtime environment that's built on Chrome's JavaScript engine. And Node can be used to create scalable network applications. Now, NPM stands for Node Package Manager, all right? And it's this big repository that will hold various packages for CSS libraries, JavaScript plugins, and so on. Now, both of these are free and you'll usually be using them with the command line from your computer. It doesn't matter if it's a Mac, a Windows machine, or a Linux machine. So how do you get started? Well, first of all, regardless of whether you're on Windows, Mac, whatever, you need to install Node.js. So, go to nodejs.org and make sure you download this version, recommended for most users. Because it is the most stable. And once you do that, you would open up your terminal and you would do something like this, node -v. And if it gives you a version number, then you will know that it's installed correctly in your system. And you can do the same with NPM, npm -v. Also if it gives you a version number, then it's installed correctly and you can start working with it right away. I have an older version of Node here compared to the existing one, but it's totally fine. I'm not gonna reinstall this on my system all over again. Now, let's say that you have these installed. Okay, how do you use NPM? Well, first of all, you have to navigate from your terminal to your working directory. And you do that with a command called cd, or change directory. I'm gonna go to my desktop, and I'm gonna open a folder called Testing NPM, which currently is a blank folder. Let's find a package on NPM and install that on our system. So, let's search for example for Bootstrap. And here we go. The first item on the list takes us to the official NPM page for the Bootstrap CSS framework. And from here, you actually have some very straightforward directions. You just copy this command, you go back to your terminal, you paste that in. You can also do install here, it's the same thing, but i is just a shorthand. So, you would hit Enter and that's it. Now, if we navigate to my Testing NPM folder in the desktop, you'll find a package-lock.json file. This is used to manage dependencies. And we'll find the node_modules folder. And inside bootstrap, in here you can find all the CSS and JavaScript files related to that Bootstrap library. From here, you just grab whatever files you need, you include them in your HTML files, and you're good to go. Now, if you don't want to use the command line and you're using a Mac, you can use an app called CodeKit. I highly recommend this app. It's not free, unfortunately. But it's not too expensive either for what it does. Essentially, CodeKit has a built in NPM system, right?. So, you don't have to use the terminal. What you do, and let me just open CodeKit here. What you do is you go to this page, which manages NPM packages. You search for a specific package, for example, Bootstrap. You select the one that you need, and you just hit Install. And it's going to do exactly the same thing that we did with the command line. So, that's an alternative. CodeKit does of course, a lot more than just managing NPM packages. It does a live server, so you can do browser refresh as you're editing files. It compiles CSS, Less files, a bunch of things. So, this lesson is not about CodeKit, but this is a must-have tool if you're a developer and you're using Mac OS. If you're using Windows I'm afraid you're out of luck, or Linux, because this is Mac only. So, if you're using the other operating systems, you can use the command line to manage NPM packages. Now, for the rest of this course, I'll be using CodeKit to install those packages that can only be added via NPM. All right, and that's how you can use Node.js and NPM to download and use CSS libraries. Now, in the next lesson, you'll learn about the first library in our list which is Modern Normalize. See you there.