Styling Form Elements9:31 with Guil Hernandez
In this video, we're going to use the BEM convention to style a form component.
So, we are gonna build one more component in this stage using the BEM convention. 0:00 This time, we'll write styles for a few form elements. 0:05 So in our index.html file when we scroll down a bit we see the main form element 0:08 and then we have labels, input fields, a text area, and a submit button. 0:16 So now that we know how to define classes using BEM, 0:21 let's start by giving our form the block and element classes. 0:25 So first, we'll go here inside the opening form tag and we give it a class attribute. 0:30 And we'll give it the class form. 0:39 So next, we'll go inside our first label. 0:41 And we'll make this an element selector by giving it the class form__label. 0:45 And I'll just go ahead and copy this class and 0:53 paste it inside our other label elements. 0:56 [SOUND]. 0:58 [BLANK_AUDIO] 1:04 Okay. 1:05 So next, we'll go inside our first input element here. 1:05 And we'll give it the class form__input. 1:10 And again, I'll just copy it and paste it right below on our next input element, 1:17 and let's also give it to the text area element. 1:23 And finally, in our submit button here, 1:27 I will give it the class form__button. 1:31 Okay, so now in our form.scss partial file 1:38 we'll style the form by first targeting that form block class. 1:43 And this time we won't give the form block class any styles, so 1:50 we'll start by targeting the form label class by including that element mix in. 1:54 So say, include e, and we'll create that form, label class, 2:02 by passing the value, label. 2:07 Okay. So we're gonna display our labels block, 2:10 and let's also give them a bottom margin equivalent to 10 pixels and ems. 2:17 So now let's define styles for the form input class. 2:27 So right inside the form rule, we'll include the element mix-in, 2:32 and we'll create the class form input by passing the value input. 2:38 So let's give our input elements a width of 100%. 2:43 Let's also make the font size a little bigger, 2:48 so let's make it equivalent to 18 pixels with the em function. 2:50 And let's also apply padding. 2:56 So again, we'll use the em function and 2:58 make the padding all around equivalent to 15 pixels for that 18 pixel font size. 3:00 So it will continue with a bottom margin, and let's make 3:06 the bottom margin value equivalent to 20 pixels for the 18 pixel context. 3:12 And right below bottom margin we're going to define a bottom border. 3:19 So let's say border-bottom. 3:24 Let's make it 6 pixels. 3:28 And let's set the color to the extra light shade of gray. 3:31 So again we'll use the palate function, and 3:35 we'll target the gray color and the extra light shade. 3:39 So, another thing we'll want to do is give our form input some nice rounded corners, 3:44 so let's use the border-radius property. 3:48 And I've already declared a variable for 3:52 our base border-radius, as we can see here in our config file. 3:55 It's called br--default. 4:00 So let me just copy that and paste it as our value for border-radius. 4:03 So next, let's change the background color. 4:10 So we'll say, background, and let's use the palette function. 4:13 And let's make the background a light grey by passing the grey then the extra, 4:19 extra light arguments. 4:25 And right below that, let's also. 4:27 Make the color black. 4:30 So, again, 4:31 we'll use the pallet function, and we're gonna target the dark shade of black. 4:32 So we'll say, black, then define the dark shade. 4:37 And finally, let's change up the font weight. 4:42 So, we'll say, font-weight, and we'll make the value font-weight--light. 4:44 [BLANK_AUDIO] 4:49 So the next thing we want to do is give our input some focus styles. 4:53 So let's create a focus selector by writing &:focus. 4:58 And then inside of that we will change the border color, because we'll want 5:06 the border color to change from this light shade of grey to the color primary shade. 5:10 So that fountain blue color we defined earlier. 5:17 So we'll say border-color, and the value will be the color-primary variable. 5:19 So next let's create some styles for this form button class. 5:27 So right below the input rule we'll once again 5:33 include the element mix in by saying include e and 5:37 we'll create the class by passing the value btn for button. 5:43 So for our form submit button, 5:50 we're going to extend the styles from this button placeholder rule. 5:52 And these are base styles for 5:58 all button elements including hover and active states. 5:59 And you can see them in action here in our main buttons which we 6:04 already defined the theme classes for earlier in a SAS map. 6:07 So, we'll go back to the button rule and let's extend 6:12 the button placeholder by writing extend button. 6:17 And let's the background color for our buttons that color-primary variable. 6:23 So that fountain blue shade we defined earlier. 6:29 All right, so lets go ahead and take a look at our form. 6:31 So we'll save our form partial, and we'll refresh the preview, and 6:34 when we scroll down we can see what our form now looks like. 6:40 Cool. 6:43 So, now when a field obtains focus it takes on that 6:44 fountain blue bottom border color. 6:48 And our submit button by default has the same color. 6:51 Now we're gonna take a look at some form button color options in just a bit, but 6:55 before we do that, let's create a modifier for hidden form labels. 7:00 So back in our form component, we can see that we're 7:06 using placeholder attributes as our labels, which is a common practice. 7:09 But when we do that, we also need to make sure that we're still using labels for 7:15 screen readers. 7:20 Now to hide them, we could use the SRT or Screen Reader Text helper class 7:21 we used in the previous stage, but I'm gonna go ahead and create a form label 7:26 hidden modifier class, that simply extends that helper class. 7:32 So back in our form partial, right inside the form label rule, 7:36 I'm going to include a modifier mix-in, and 7:42 we're going to create that hidden modifier class by passing the value, hidden. 7:46 So now inside this hidden rule we can 7:53 extend that screen reader text helper class. 7:56 All right, so now we can go back to our form and 8:01 add that hidden suffix to the form label classes. 8:04 So, for instance, up top in our first label we'll say form__label--hidden, and 8:07 I'll just go ahead and copy and paste it in the two labels below. 8:12 So now I'll go ahead and save our index.html file, and back in 8:18 the preview when we refresh it we can see how the form labels are now hidden. 8:23 Cool. 8:29 Finally, we'll revisit the form submit button which, as we know, 8:30 defaults to the fountain blue background color with a width of 100%. 8:34 But we're also able to use any of these button modifier classes we created in 8:39 the previous stage for different colors. 8:43 So for instance, 8:46 what if we have two buttons that need to be displayed on one line? 8:46 So for example a reset button next to the submit button. 8:51 So I'll just go ahead and copy the submit button, and paste one right below. 8:55 And I'll change the type to reset and the value will be reset. 9:00 So, in this instance, we can just use the button classes by themselves. 9:04 So instead of form button, we can say button default. 9:09 And right below for 9:15 our reset button we can say button warning for a different color. 9:16 And now when we save our index file and 9:22 take a look at it again, there we see our themed inline form buttons. 9:25 Cool. 9:30
You need to sign up for Treehouse in order to download course files.Sign up