- Overview
- Transcript
1.3 Using External Libraries in CodePen
Sometimes you may find yourself needing to use external JavaScript or CSS libraries as you work in CodePen. In this lesson, I’ll show you how to include links to these external libraries in your Pen settings.
Related Links
1.Introduction3 lessons, 07:12
1.1Introduction00:30
1.2CodePen02:26
1.3Using External Libraries in CodePen04:16
2.Animation Refreshers2 lessons, 15:09
2.1CSS Animation Refresher06:21
2.2jQuery Animation Refresher08:48
3.Button Animations12 lessons, 1:53:20
3.1Styling Your Navigation11:16
3.2Simple Button Fades09:55
3.3Animating Multiple Properties06:19
3.4Before and After08:53
3.5Background Swipe12:31
3.6Background Swipe Variations06:28
3.7Text Scroll08:54
3.8Setting Up Your Buttons09:56
3.9Expanding Buttons12:53
3.10Setting Up 3D Buttons09:33
3.11Animating the 3D Buttons09:55
3.12Subtle 3D Hover Effect06:47
4.Image Animations3 lessons, 25:57
4.1Basic Image Hover Effects11:31
4.2Images and Captions08:52
4.3Animating the Images05:34
5.Other Web Elements6 lessons, 1:07:16
5.1Floating Form Labels06:07
5.2Animating the Labels11:03
5.3Animated Panels12:02
5.4Panels and Bullets13:09
5.5Styling the Pricing Tables12:50
5.6Creative Product Selection12:05
6.Bonus Projects3 lessons, 26:43
6.1Responsive Animation06:33
6.2Image Animations10:29
6.3CSS Slider09:41
7.Bonus Projects II3 lessons, 33:50
7.1Background Animation10:01
7.2Spinning Buttons09:33
7.3Submit Button Animation14:16
8.Conclusion1 lesson, 00:39
8.1Final Thoughts00:39
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.