FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.2 Navbars and Buttons

Let’s add a few Propeller classes to your navbars and buttons to give them a little variety.

2.2 Navbars and Buttons

Hello and welcome back. In this lesson I wanna talk about navbars and buttons in Propeller. And if you open up your project files folder, we're gonna be starting with the Lesson_02-02 folder. Inside that folder, we have a folder called site_start. This has the files that we're gonna start with in this lesson. And I'm gonna go ahead and make another copy of that, and I'm gonna call that copy start underscore end or site underscore end, excuse me. And all the changes that we make in this lesson will be saved in that site_end folder. So I'm gonna open up the site_end folder there in brackets, and we'll open up our index.html file. Now let's go ahead and open that up in the browser, so we can start comparing. You'll notice I've still got the lesson 21 site start folder opened up. This is the one where we have all of the default bootstraps styles showing. And next to that I'm gonna open up a similar file, but we're gonna be opening up the lesson_02_02 site end folder. And so we can already see the difference here in the default Propeller styles as we talked about in the last lesson. And now we're gonna take a closer look at the navbar at the very top of the screen. So in bootstrap there are a couple of different ways that we can style the navbar. You'll notice in our code, I've got the navbar inverse class here which is what gives it the dark background and the light colored text. If we take that off and open up our site and refresh it, you'll see that gives us a light colored background by default. Well let's take a look at some propeller specific classes, and all of the propeller specific classes we're gonna look at start with PMD, which stands for Propeller Material Design. But let's jump back into our code. And I'm gonna apply another class to our navbar called pmd-navbar. So we're just gonna add that simple Propeller class here, and let's see how that changes things. And there's just gonna be a very subtle shift at first. But if we refresh our page, you'll notice that the navbar gets slightly bigger and the font changes a little bit. We're using a different font now, and we can see the same change even if we switch over. Let's go back up to our navbar element here and in addition to pmd-navbar, I'm also gonna turn back on that navbar in reverse so that we can give it a dark background. And if we refresh it here you'll see that we have a different look than we had before. If we go back to our original bootstrap site and then toggle back and forth between those, you can see quite a difference in the text itself. But also the size of our navbar is a little bit different now. Another place where you'll notice a change on the navbar is if we bring the browser size down a little bit, and I'm gonna do this using the Chrome Developer Tools. If you hit F12 in Chrome, it will open these up. And over here in the left there's this toggle device toolbar icon, which is the second icon in the left for me. I'm gonna click on that, and you can basically turn it into an adjustable view here. Now from this dropdown at the top, you can specify a certain type of phone that you wanted to look like or dimensions that you wanted to take on, or you can just drag on the bars over here on the left to change the size. So once we get down to a certain size, you'll notice it changes from the default navbar look to a collapsed navbar where we still have the brand over here on the left, but instead of the other navbar items, instead of the menu items, we have this hamburger button over here on the right. And if we click on that, you can see that it expands our menu down. And this doesn't change much when we switch over to Propeller, but it does improve the look of it a little bit. So let's jump back over to our new site, our current site, and let's open up Chrome Developer Tools there. And here you'll see that the hamburger button is now on the left. You'll also notice that it doesn't have the rounded rectangle corners on it, and if we click on it, you'll actually see that it's a perfectly round circle. So the button changes a little bit. It gives it a nice clean look. I really like the way it looks. But it's not a huge change. But again improves the look just a little bit. Now there's another Propeller specific class we can add to this button. And we can add this class to any of our buttons, and it's really a cool effect. And also let's jump into our index.html file and we'll find that button. Just inside your navbar header, we have a button that has a class of navbar toggle. That's that hamburger button. And you can find all of this markup on the bootstrap website. This is taken straight from their website. But there's a class we can add to this button after the collapsed class, and it's called pmd-ripple-effect. And this just gives us a really cool click effect on our button. So let's save that and jump back into our browser, and we're gonna refresh the page. And now when we click on that button, you'll see that it has this nice little click effect where it looks like there's a ripple going across the button. So that's a really cool effect, and you can apply that again to any of your buttons and we'll see that in just a moment. But that's it for the navbar for now, let's go ahead and turn off our Chrome Developer Tools, excuse me, we'll go back to the original view. And there's one more thing I wanna add here. So we have this Shop button and you can't tell just by looking at it that it's a dropdown button, so I want to make that a little more clear. So let's jump back into our index.html file. And here's our Shop button right here. And inside it is this unordered list that has our dropdown menu items. But right next to the word shop, I'm gonna create a span element with a class of caret, C-A-R-E-T, not carrot the vegetable. And it's just gonna be an empty span, but when we do that, and this works in bootstrap as well as Propeller. Once we do that and then save it and jump back into our browser and refresh. We now see a little triangle next to our button that makes it clearer that it is a dropdown. And we can also apply the ripple effect to that dropdown, so if we go back to our code, we can take our Linker tag here. It has a class of dropdown-toggle. We can also give it a class of pmd-ripple-effect. Save that, refresh our page, and we can see that ripple effect on our shop button, on our dropdown button. So again, you can apply that to any button. And if we scroll down a little bit on our page, maybe about halfway down, a little over halfway down, you'll see the buttons and badges section. So again, if we compare that to the default, let's turn this off again. If we compare that to the default bootstrap styles, excuse me, you can see a little bit of a difference there. The bootstrap buttons have rounder corners on them, and the colors are slightly different. But again there is more we can apply to these buttons using Propeller other than just these default changes. For example as we've been talking about, we can give these buttons a ripple effect. So let's scroll down to our buttons section and here we go, here's our list of buttons. So we have some default bootstrap classes applied to these buttons. We have the default BTN class as well as BTN default, BTN primary, BTN success, BTN info. That’s what gives these colors or these buttons, excuse me, the different colors that they have. And these are bootstrap classes, and with the Propeller framework on top of bootstrap, it styles them a little bit differently, but those are still bootstrap specific classes. But again to any of these buttons, we can apply pmd-ripple-effect and we'll save that, and jump back into our browser and refresh. And now these four buttons at the top have the ripple effect applied to them. So it's just a cool little effect you can apply to anything clickable, but there is a little more we can do with our buttons other than just that ripple effect. So we can go back into our code and we can give our buttons some default shadows by giving them another class specific to Propeller. And again, I'm going to apply this to four different rows at once. If you're wondering how I'm doing that, I'm using brackets here, and brackets allows me to do this. If I hold on to Alt and click+drag down, it allows me to highlight multiple lines at once. So I'm gonna apply a new class to these first four buttons. And I'm gonna call that pmd-btn-raised. And what this does, is it puts a little bit of a shadow behind our button. So if we go back to our site and refresh, we can now see that these first four buttons have a shadow behind them. Well there are a couple more classes we can apply to our buttons to kind of change the look of them. And let's do that with these last two buttons at the bottom, the warning and the danger button. So for the warning button, I'm going to add a class of pmd-btn-flat and then for the danger button after that, I'm gonna add a different class of pmd-button-outline. And we'll see what those do. So let's save that, jump back into our browser and refresh. And there we go, so our first button basically is just given a transparent background with the orange text. And our second button with a class of pmd-btn-outline, it gives us an outline button and when we hover over it, it gives us that default orange color for the background. So those are some basic Propeller specific styles that you can add to your navbars and your buttons in order to spice them up a little bit, and give them a little bit of variety. So thank you for watching and I'll see you in the next lesson.

Back to the top