Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
In this video, we're going to use the BEM convention to style a form component.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up