1
00:00:00,110 --> 00:00:03,510
So next, we are going to create modifier
classes for

2
00:00:03,510 --> 00:00:08,940
our headline because we also want a
heading group variation that

3
00:00:08,940 --> 00:00:13,830
groups the headline secondary element with
the headline primary.

4
00:00:13,830 --> 00:00:18,240
So, it will appear as a sub-title right
below the primary headline.

5
00:00:18,240 --> 00:00:22,010
So, we'll head over to our headlines.scss
partial.

6
00:00:22,010 --> 00:00:26,000
And inside the headline primary rule,

7
00:00:26,000 --> 00:00:29,040
we're going to include the modifier
mixins.

8
00:00:29,040 --> 00:00:32,940
So, we'll say include m and we're going to
create

9
00:00:32,940 --> 00:00:38,460
the class headline primary grouped by
passing the value grouped.

10
00:00:40,520 --> 00:00:44,280
So now inside this grouped modifier rule,

11
00:00:44,280 --> 00:00:49,620
we'll also extend the headline primary
placeholder and

12
00:00:49,620 --> 00:00:54,940
let's remove the bottom margin so that
it's closer to the secondary headline.

13
00:00:54,940 --> 00:01:00,690
So let's say margin-bottom 0.

14
00:01:00,690 --> 00:01:05,278
Okay, so now we can go ahead and do the
same for the headline's secondary element.

15
00:01:05,278 --> 00:01:09,703
So, once again, inside the headline's
secondary rule,

16
00:01:09,703 --> 00:01:13,153
we're going to include the modifier mixin
and

17
00:01:13,153 --> 00:01:19,186
create a class called headline secondary
grouped by passing the value grouped.

18
00:01:19,186 --> 00:01:22,738
[BLANK_AUDIO]

19
00:01:22,738 --> 00:01:29,170
Then we'll extend this headline secondary
placeholder in our modifier class.

20
00:01:29,170 --> 00:01:33,300
So now, we'll add some top and bottom
margin properties.

21
00:01:33,300 --> 00:01:35,730
So first, we'll say margin-top.

22
00:01:35,730 --> 00:01:41,450
And we're gonna set the top margin
equivalent to 10 pixels for

23
00:01:41,450 --> 00:01:44,650
the 24 pixel font size.

24
00:01:44,650 --> 00:01:50,260
And right below that, we're going to set
the bottom margin

25
00:01:50,260 --> 00:01:56,850
equivalent to 54 pixels for that 24 pixel
font size context.

26
00:01:56,850 --> 00:02:01,490
Okay, so now if we want to display the
grouped variations, we can go back to

27
00:02:01,490 --> 00:02:06,700
our markup and simply add the grouped
modifier to both class attributes.

28
00:02:06,700 --> 00:02:10,232
So first, we'll say
headline-primary-grouped,

29
00:02:10,232 --> 00:02:13,540
then we'll say headline-secondary-grouped.

30
00:02:14,560 --> 00:02:19,990
And now, when we go back to our preview
and refresh, we can see how the secondary

31
00:02:19,990 --> 00:02:24,400
headline appears as a sub-title, right
below the primary headline.

32
00:02:24,400 --> 00:02:25,190
Nice.

33
00:02:25,190 --> 00:02:30,150
Finally, let's also create a couple of
base rules for our paragraphs and

34
00:02:30,150 --> 00:02:32,180
block quote elements.

35
00:02:32,180 --> 00:02:35,190
So, back in our base.scss partial,

36
00:02:35,190 --> 00:02:41,882
we'll scroll down right below this a rule
here, and let's target the paragraphs.

37
00:02:41,882 --> 00:02:44,879
[BLANK_AUDIO]

38
00:02:44,879 --> 00:02:49,266
And we'll set the font size to an em value
equivalent to 18 pixels.

39
00:02:49,266 --> 00:02:53,862
[BLANK_AUDIO]

40
00:02:53,862 --> 00:02:56,390
Let's set the line height.

41
00:02:56,390 --> 00:03:02,080
So we'll say 27 pixels divided by that new
context of 18 pixels.

42
00:03:04,330 --> 00:03:06,200
And let's also give the paragraphs a
margin.

43
00:03:06,200 --> 00:03:11,180
So we'll say 0, 0, and we'll use the em
function to make

44
00:03:11,180 --> 00:03:17,370
the bottom margin equivalent to 30 pixels
in em for the 18 pixel font size.

45
00:03:17,370 --> 00:03:22,109
And right below, let's target our awesome
block quote elements.

46
00:03:22,109 --> 00:03:26,707
[BLANK_AUDIO]

47
00:03:26,707 --> 00:03:32,280
And let's set the block quote font size
equivalent to 24 pixels.

48
00:03:35,140 --> 00:03:36,954
We'll make the font style italic.

49
00:03:36,954 --> 00:03:40,987
[BLANK_AUDIO]

50
00:03:40,987 --> 00:03:45,624
Let's also give it a font weight, so let's
say font-weight--light.

51
00:03:45,624 --> 00:03:51,523
[BLANK_AUDIO]

52
00:03:51,523 --> 00:03:54,905
We'll want some margin as well, so

53
00:03:54,905 --> 00:03:59,979
let's say em equivalent to 32 pixels for
the top and

54
00:03:59,979 --> 00:04:06,010
bottom margins and let's set the left and
right margins to 0.

55
00:04:06,010 --> 00:04:10,782
Let's define a left padding value of 5%
and

56
00:04:10,782 --> 00:04:14,690
finally, let's give it a border left
property.

57
00:04:14,690 --> 00:04:20,160
So we'll say border-left solid and we'll
want the border width

58
00:04:20,160 --> 00:04:25,780
equivalent to 8 pixels for that 24 pixel
font size context.

59
00:04:26,830 --> 00:04:30,880
And let's give it a color with the palette
function.

60
00:04:30,880 --> 00:04:36,800
So let's select the grey palette and call
the extra extra light shade.

61
00:04:38,300 --> 00:04:41,020
All right, so let's save our base partial.

62
00:04:41,020 --> 00:04:43,340
So let's go ahead and take a look at it in
the browser.

63
00:04:43,340 --> 00:04:47,599
So, it looks like our paragraph font
weight is a little too bold, so

64
00:04:47,599 --> 00:04:52,030
let's adjust that by giving our paragraph
a font-weight property.

65
00:04:53,640 --> 00:04:57,155
And we'll make the value
font-weight--light.

66
00:05:01,190 --> 00:05:05,335
And it also looks like I have a typo in
this block quote element selector,

67
00:05:05,335 --> 00:05:07,210
ao let me fix that.

68
00:05:07,210 --> 00:05:11,620
And we should be good, so let's save and
refresh.

69
00:05:11,620 --> 00:05:15,280
And now, as we can see, our typography
looks much nicer.