FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Propeller Forms

Propeller offers some really appealing styling for forms. In this lesson, you’ll look at some CSS classes you can add to your Bootstrap form elements to really make them pop.

2.4 Propeller Forms

Hello and welcome back. In this lesson, I wanna talk about forms in propeller. And by default, we don't see anything fancy happening whenever we turn on the propeller framework as far as forms go. Our form here looks very similar to how it looked in vanilla Bootstrap. But there are some propeller specific classes that can really make our forms look a lot better, a lot cleaner, and really make them stand out. So we're gonna take a look at a couple of those in this lesson. So for this lesson, we're starting with the lesson 02-04 folder. And as usual, we're gonna start with all of the files inside the Site Start folder. And all of the changes we make in this lesson will be saved in the Site End folder. So I've already got Site End open up here, and we can see what our form looks like right now. And now, I wanna take a look at a couple of propeller classes that will really make this stand out. So I'm gonna jump into our files here, I've got our starting files opened up here and I'm gonna scroll down to the form section. And it might be easier if I just do a search for input. There we go, and here's our forms section. So in order to make these look really, really nice, there's not a whole lot that we really have to do to it. All we need to do is to go into our form groups which we can find right here, and each of these form groups has a label and an input in it. But if we go to the parent of that label and input which is, again, is this form-group element, we can add another class called pmd-textfield. Now keep in mind that this only works on form groups that contain text fields and labels. So you're not gonna use this on a form group that just has buttons or something like that in it. But we're gonna highlight this pmd-textfield and I'm gonna apply it to the form group that contains our password field, and that should do it. So I'm gonna save our index.html file there. I'm gonna jump into our browser and refresh and already, we see something that looks a lot better. We have our label appear at the top. And then inside our text field which, again, no longer has four borders around it, instead it just has a border on the bottom, which looks really nice. And when we click on it, we get this nice animated blue underline. So that's a really neat effect. And then we can type in whatever we want here. So again, just one little class makes this really stand out. But there's something even cooler we can do with it by creating some floating labels. And the way we create floating labels is we'll go back into our code. And in addition to pmd-textfield, we're going to add another class called pmd-textfield, and this is a long one, pmd-textfield-floating-label. So again, I'm gonna copy that entire class and we'll paste it on our second field as well. So we'll save our file again, jump back into our browser and refresh. And now, we have something different going on. You'll see we have email address here, but when we click on our textfield, our label moves up and floats above the textfield. Same thing for the password, we can see that move up and float above the field. You'll notice we also have a check box down here. And if we jump back into our code, we can do something with our check boxes in propeller. So on a label, you'll notice that the input, the check box itself is inside the label. But on the label, I'm gonna give it a class of pmd, you might have guessed this already, pmd-checkbox. And I'm also gonna add another class called pmd-checkbox-ripple-effect. So you don't need both of these classes, but the pmd-checkbox will style it the way we want it. And then the pmd-check-box-ripple-effect will give us a familiar ripple effect that we've seen before. So let's save that, jump back into our browser, and refresh, and our check box looks a lot better. And when we click on it, it has a nice little ripple effect as it checks the box. And so again, as always, I would encourage you to go back to the propeller website at propeller.in, take a look at all the components there. There are more that you can do with your forms, you can add PMD specific classes to your radio buttons, using the PMD-radio class. You can create toggle switches, etc. So again, as always, take a look at the propeller website. There's a lot of good information there that we just don't have time to cover in a short course like this. But those are a few options that you have when dealing with forms in propeller. Thank you for watching and I'll see you in the next video.

Back to the top