Headline Modifiers5:15 with Guil Hernandez
Next, 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
You need to sign up for Treehouse in order to download course files.Sign up