FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Flipping the Switch

In this lesson, you’ll learn how you can very quickly turn a “vanilla” Bootstrap site into a masterpiece of Material Design by activating the Propeller framework on your site.

2.1 Flipping the Switch

Hello and welcome back. In this lesson we're going to take a look at some of the default styles that the Propeller framework adds to your Bootstrap website. And were gonna be starting in the project files folder that comes with this course. We'll be starting in the Lesson_02_01 folder, so let's open that up, and in that folder you'll see a folder called site_start. That's the folder we're gonna be starting with in this lesson. And I'm gonna make a copy of this folder and we're gonna call this copy start_end and so once we're done with this particular lesson, all the changes that we've made in this lesson will be saved in that site_end folder. So I'm gonna go ahead and open that up as a Brackets project, so there we go. Now that we've got that opened in Brackets we can take a look at our index.html file. So on the left I'm gonna click on index.html, and the file we see here is identical to the file that we looked at in the last lesson except that you'll notice we've got the Propeller CSS commented out. And then at the very bottom of our document we've got the Propeller JavaScript commented out. And I've got that commented out so that we can see what our website looks like without the Propeller styles applied to them. And I'm gonna jump over to Chrome where I've got that file opened up, and here we can see our default Bootstrap website. And so in this website I've just created a bunch of very commonly used Bootstrap components, including some basic text styles, a block quote here we've got some alerts, some accordions, some buttons, some drop downs, etc. So this is what our basic Bootstrap website looks like without any extra styles applied on top of it. And the whole purpose of this particular lesson is I just wanna flip that switch, and turn the Propeller framework on so that you can see how the default styles change without adding any extra Propeller markup to our code. So I'm gonna jump back into our index.html file here and I'm gonna uncomment that propeller.css file. We'll come down to the bottom and we're also going to uncomment the propeller.min.js file at the very bottom. So once we've got those commented out I'm gonna save our changes, I'm gonna jump back into our browser, and I wanna be able to switch back and forth between the two views. So instead of refreshing the page, I'm gonna copy the URL here and just paste it in a new tab. And we can already can see the changes in this new tab. So if we go back to our Bootstrap site, you can see that not a lot changes with our header up here at the top, our nav bar. The text changes a little bit. It's using a new font. But, as we move down the page, we can see the block quote is different. We can see the background color of the page is different. The Propeller theme is using a light gray background instead of a white background. We do have some Propeller classes applied to these four display text fields. But other than that, this is just plain Bootstrap markup. There's not much that's been done here, or nothing really that's been done here, to change the styles to Propeller specific styles. All we've done is we've turned on the Propeller framework. Now, as we move through this course, we're gonna see that we can do a lot more with the Propeller framework using Propeller-specific classes. But again, as we go back and forth between the two sites, we can see a big difference in the buttons, at least in the color of the buttons and the basic styling of the buttons. If we go down a little bit further, you’ll see we’ve got some basic differences with the forms. Not huge differences, but again, we’ll see more later on about how to apply Material Design principles to our site, to every aspect of our site, using the Propeller framework. So we can go back down a little further, we can launch a modal here and this is the default Bootstrap modal. And in the Propeller framework, once we layer that on top of Bootstrap, we can see that it looks a little bit different. Our corners are no longer rounded and the header and footer look a little bit different. But yeah, this is a really good way to just change up the look of your site so that it doesn't look so much like a default Bootstrap site. So again, those are just some of the basic styles that Propeller applies out of the box, just by pointing to the Propeller framework. Again, as we move forward we're gonna take a closer look at some of these individual modules and how we can tweak them even more using Propeller-specific classes. So thank you for watching, and I'll see you in the next lesson.

Back to the top