FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.3 Setting Up Your Files

In this lesson, you’ll learn how to set up your HTML files to include Propeller and all of its dependencies.

1.3 Setting Up Your Files

Hello, and welcome back. In this lesson we're gonna start to talk about everything we need in order to get started using Propeller on our websites. And you can find everything you need on the Propeller website. Now, Propeller is built on Bootstrap, so we are gonna need Bootstrap as well. And many of the components in Bootstrap and Propeller rely on jQuery, so we're also going to need to include jQuery in our site. But again, you can find everything you need here on the Propeller site at propeller.in. So, if we click on the GET STARTED link and then scroll down a little bit, you can see four different options for downloading. And for now I'm gonna click on this second download link under Propeller kit. We're gonna click on that and it will download that for us. Now I've already downloaded this to my computer, so if we just jump over to brackets where I've got this opened up, and I'll be using the brackets editor for all my code in this course. I like brackets, because you can open up an entire folder at once. And we can browse through that folder to look at the different files. But when you first download Propeller, you'll find a file or a folder called pmd-1.1.0, or whatever version they're on at the time that you download it. And inside that folder, you'll find a few other folders. Now, the one we're gonna be using in this course is the dist folder which has just the Propeller files in it. So it has the Propeller CSS files, it has the Roboto font that the Propeller framework uses. And it also has the JavaScript files for the propeller framework. You'll notice if you go back to the PMD folder, there's also an assets folder here. And in that folder you also find all of the files you need for Bootstrap as well. So there are the Bootstrap CSS files in addition to the Propeller files. And in the JavaScript folder, you'll find jQuery as well as Bootstrap in addition to the Propeller files. So all the files that you need are there in your assets folder, but we're not gonna be using these Bootstrap and jQuery files and instead we're gonna be pointing to Bootstrap and jQuery through a CDN. And if we jump back to my sample code here, you can see that. So in the head of the document, let's make this a little bit larger so we can read it better. So in the head of the document we have three link tags for our styles. We have our Bootstrap CSS file first after that we have a Google icon font which just has some material icons. And you can find some more information about those icons not only on the material website but also on the Propeller website. And Propeller actually has some specific classes for dealing with those icons. And then we also have the Propellor CSS file after that. Now the JavaScript is going to be found at the very bottom of the document, because we want our document content to load before it starts loading the JavaScript files. But the order that we put these in here is very important. We have jQuery first, because a lot of the components in Bootstrap and Propeller are built on jQuery, so again we have jQuery first, Bootstrap second and then Propeller.min.js is our final file there. So again you can see jQuery is using a CDM link. I'm not using a local version, I'm using the one at googleapis.com. Same thing for Bootstrap.min.js. We're using the max CDN website to point to Bootstrap. And than you'll notice that the Propeller files are local. So that's the basic setup you need in order to use Bootstrap as well as the Propeller framework. So as we move forward, our site is gonna have this basic setup and we should be able to jump into Bootstrap and Propeller now and start designing. So thank you for watching and I'll see you in the next lesson.

Back to the top