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.