Panel Layout Component

As I mentioned in the previous videos, the layout rules are for 0:00 the major layout sections of our site, for elements that contain many of our modules. 0:03 A few of the most common ones being header, footer, or a main content section. 0:09 Since most of our layout will be handled by a grid and 0:13 we'll see how in the next stage, we're going to create a panel layout 0:17 component we can use on any part of our site, mainly our header and footer. 0:21 So we'll want a default panel with two modifier options, centered and 0:25 padding, so that it has additional padding. 0:30 So first, we'll go down to the console and have Sass watch for 0:32 changes in our project by writing the command sass --watch scss to css. 0:37 And now, we'll go over to our extends.scss partial file and 0:44 first, we'll create two placeholder selectors for 0:48 the shared padding styles we're going to use in our paneled rules. 0:52 So, I'll just add a comment here for Panels and 0:56 let's create our first placeholder, which we'll call panel-default. 0:59 [BLANK_AUDIO] 1:05 And inside, we are gonna give it a padding-top property. 1:09 So, we'll make the top padding equivalent to 30 pixels in ems and 1:13 we're gonna give it some bottom padding. 1:19 And this time, the bottom padding will be equivalent to 20 pixels. 1:22 [BLANK_AUDIO] 1:26 So next, we're gonna create another placeholder rule for additional padding. 1:29 So I'll just go ahead and copy the one we just wrote and 1:33 paste it right below, and I will change the name to panel-padding. 1:37 And this time, we'll make the padding at top value equivalent to 80 pixels and 1:43 the padding-bottom equivalent to 34 pixels. 1:48 All right, so now we'll go over to the panel.scss partial 1:53 inside the layout directory and we'll create our panel rule. 1:57 So first, we'll define the class panel. 2:02 And inside, we're going to extend the panel default placeholder. 2:06 So we'll say extend panel-default. 2:11 And right below, 2:16 we're gonna create a new modifier class by including the BEM modifier mixin. 2:17 And we'll create a class called panel-centered by 2:23 passing the value centered. 2:27 So, we'll want the centered modifier to also have the panel default styles, 2:31 so we're going to extend the panel-default placeholder inside our modifier. 2:37 And we're also going to extend a placeholder helper that center 2:42 aligns a container. 2:46 So, inside our utilities folder, if we open the helpers partial, we can see 2:48 the center-align placeholder selector, so I'll just go ahead and copy the selector. 2:53 And back inside our centered modifier, we'll say extend center-align. 3:00 Okay, so right below, let's create our new panel-padded modifier. 3:06 So, inside the panel rule, we'll again include a modifier mixin and 3:11 we'll create the class panel-padded by passing the value padded. 3:17 So this time, we'll want to extend the panel padding placeholder, so 3:24 we'll say extend panel-padding. 3:29 [BLANK_AUDIO] 3:32 And since we also want a padded center modifier, 3:35 we'll once again include a modifier with the value centered. 3:40 And this time, we'll want to extend the center-align placeholder and 3:46 the panel-padding placeholder 3:53 [BLANK_AUDIO] 3:56 So, it's okay to use multiple modifiers at once on a single item as long as 4:06 they represent different properties. 4:11 So now let's go over to our index.html file and 4:14 test these new panel classes on our header element. 4:17 So, let's go inside our header opening tag and let's first give it the class panel. 4:22 And, as we can see, that added some top and bottom padding to the header. 4:32 And let's try the panel--centered modifier, which, 4:37 as we can see, centered our header element on the page. 4:43 And if we want to add padding to the centered class, 4:47 we can then define the class panel--padded--centered. 4:50 Which, as we can see, gives us a nice centered header with top and 4:58 bottom padding. 5:02 So, finally, let's also give the footer element 5:03 that panel--padded--centered class. 5:07 So, at the bottom, in the opening tag for the footer, 5:09 we'll give it a class attribute and define the class panel--padded--centered. 5:12 Cool. 5:21 So now we have a panel layout component, we can easily customize for any project. 5:22 In an upcoming video, we'll apply a mobile first development approach with a grid and 5:27 modular media queries. 5:32