1.3 Using External Libraries in CodePen

Hello and welcome back to practical web animation. Sometimes when you're working in CodePen you might need access to an external JavaScript or CSS library for example let's say we wanted to use jQuery in our CodePen and we wanted to use the font awesome icon set. So let's talk about how we would do that. I'm gonna create a new pen. And in our new untitled pen I'm going to click on the settings icon here and here we have a few tabs. We have a tab for HTML, so if we wanted to use a pre-processor like mark down, for example, we can select that from this drop down or if we wanted to add certain classes to the HTML tag, we could do that here. If we wanted to add items that we might include in the head section of an HTML document, we can do that here. But the next two tabs are the ones I want to look at for our purposes here. So if we click on the CSS tab, Here we can include a CSS pre-processor, such as less or SAS. You can also choose normalize or reset the .CSS as a CSS base. I'm going to leave that on neither. There's also some options for vendor prefixing as well, but I want to jump down here to the external CSS portion. Here we can include external CSS libraries. There are even a couple of quick add libraries down here at the bottom that we can choose from. So we can choose bootstrap or foundation. We can choose animate.css to very quickly use the built-in animate classes there. In order to animate our items on the stage. So those are a few options we have there or, if we have a link to a CSS CDN we can include those here. So for example, if we wanted to use the Font Awesome icons, and I'll include the link for Font Awesome in the course notes, but if we click on the icons tab here you can see a list of icons that you can use here in these are all scalable because this is a font. You can make these as large or small as you want to and they will look nice. Now once you come to this website, if you click on the get started link, and then scroll down a little bit, you'll see this CDN link here, that we can use, so gonna highlight this link, now I'm not gonna highlight the entire link tag, this is the tag we would use if we were to link to it in an HTML document, but since we're just using our settings in our CodePen, we just need the URL here. So, I'm gonna grab the URL, I'm gonna copy that, and then jump back into CodePen, and I'll just paste it in one of these fields here. And there we go. So then we can close this and if we want to see if that works we can enter in an i tag here and I'm gonna give it a class of fa for Font Awesome. And these are classes that are specific to the font awesome set and then we'll give it a specific class like fa- plane, and then we'll close our I tag and then down here at the bottom you'll see an airplane and in our CSS, if we wanted to we could point to the F.A. class, for example and change the font size to 20 pixels, whatever you wanna do, and you'll see that it does change we can bring it up to maybe 80 if we want it nice and large. And so again those are nice and crisp at any size. So those are your CSS options if you go to our settings, scroll back up to the top and click on the JavaScript tab. We have some very similar options here. First of all, you have some preprocessors you could choose from, such as CoffeeScript. We're not really gonna cover those, but then we have our external JavaScript libraries or frameworks that we can choose from. So we have a drop down here for a quick ad and we can add jQuery here. If we scroll down you'll see there's also the JavaScript for bootstrap as well as a number of other different JavaScript frameworks so I'm going to add jQuery here and then will disclose on clothes and we now have it set up so we. Use jQuery over here or JavaScript window. We can use font awesome in our HTML and it'll be just like we have those script tags or styles tags embedded in our HTML files. So thank you for watching and I'll see you in the next lesson.