Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Next, we'll use the BEM convention to define modifier classes for our headlines.
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 next, we are going to create modifier
classes for
0:00
our headline because we also want a
heading group variation that
0:03
groups the headline secondary element with
the headline primary.
0:08
So, it will appear as a sub-title right
below the primary headline.
0:13
So, we'll head over to our headlines.scss
partial.
0:18
And inside the headline primary rule,
0:22
we're going to include the modifier
mixins.
0:26
So, we'll say include m and we're going to
create
0:29
the class headline primary grouped by
passing the value grouped.
0:32
So now inside this grouped modifier rule,
0:40
we'll also extend the headline primary
placeholder and
0:44
let's remove the bottom margin so that
it's closer to the secondary headline.
0:49
So let's say margin-bottom 0.
0:54
Okay, so now we can go ahead and do the
same for the headline's secondary element.
1:00
So, once again, inside the headline's
secondary rule,
1:05
we're going to include the modifier mixin
and
1:09
create a class called headline secondary
grouped by passing the value grouped.
1:13
[BLANK_AUDIO]
1:19
Then we'll extend this headline secondary
placeholder in our modifier class.
1:22
So now, we'll add some top and bottom
margin properties.
1:29
So first, we'll say margin-top.
1:33
And we're gonna set the top margin
equivalent to 10 pixels for
1:35
the 24 pixel font size.
1:41
And right below that, we're going to set
the bottom margin
1:44
equivalent to 54 pixels for that 24 pixel
font size context.
1:50
Okay, so now if we want to display the
grouped variations, we can go back to
1:56
our markup and simply add the grouped
modifier to both class attributes.
2:01
So first, we'll say
headline-primary-grouped,
2:06
then we'll say headline-secondary-grouped.
2:10
And now, when we go back to our preview
and refresh, we can see how the secondary
2:14
headline appears as a sub-title, right
below the primary headline.
2:19
Nice.
2:24
Finally, let's also create a couple of
base rules for our paragraphs and
2:25
block quote elements.
2:30
So, back in our base.scss partial,
2:32
we'll scroll down right below this a rule
here, and let's target the paragraphs.
2:35
[BLANK_AUDIO]
2:41
And we'll set the font size to an em value
equivalent to 18 pixels.
2:44
[BLANK_AUDIO]
2:49
Let's set the line height.
2:53
So we'll say 27 pixels divided by that new
context of 18 pixels.
2:56
And let's also give the paragraphs a
margin.
3:04
So we'll say 0, 0, and we'll use the em
function to make
3:06
the bottom margin equivalent to 30 pixels
in em for the 18 pixel font size.
3:11
And right below, let's target our awesome
block quote elements.
3:17
[BLANK_AUDIO]
3:22
And let's set the block quote font size
equivalent to 24 pixels.
3:26
We'll make the font style italic.
3:35
[BLANK_AUDIO]
3:36
Let's also give it a font weight, so let's
say font-weight--light.
3:40
[BLANK_AUDIO]
3:45
We'll want some margin as well, so
3:51
let's say em equivalent to 32 pixels for
the top and
3:54
bottom margins and let's set the left and
right margins to 0.
3:59
Let's define a left padding value of 5%
and
4:06
finally, let's give it a border left
property.
4:10
So we'll say border-left solid and we'll
want the border width
4:14
equivalent to 8 pixels for that 24 pixel
font size context.
4:20
And let's give it a color with the palette
function.
4:26
So let's select the grey palette and call
the extra extra light shade.
4:30
All right, so let's save our base partial.
4:38
So let's go ahead and take a look at it in
the browser.
4:41
So, it looks like our paragraph font
weight is a little too bold, so
4:43
let's adjust that by giving our paragraph
a font-weight property.
4:47
And we'll make the value
font-weight--light.
4:53
And it also looks like I have a typo in
this block quote element selector,
5:01
ao let me fix that.
5:05
And we should be good, so let's save and
refresh.
5:07
And now, as we can see, our typography
looks much nicer.
5:11
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