Preview
Video Player
00:00
00:00
Headline Modifiers
5:15Next, we'll use the BEM convention to define modifier classes for our headlines.
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