As I mentioned in the previous videos, the layout rules are for

the major layout sections of our site, for elements that contain many of our modules.

A few of the most common ones being header, footer, or a main content section.

Since most of our layout will be handled by a grid and

we'll see how in the next stage, we're going to create a panel layout

component we can use on any part of our site, mainly our header and footer.

So we'll want a default panel with two modifier options, centered and

padding, so that it has additional padding.

So first, we'll go down to the console and have Sass watch for

changes in our project by writing the command sass --watch scss to css.

And now, we'll go over to our extends.scss partial file and

first, we'll create two placeholder selectors for

the shared padding styles we're going to use in our paneled rules.

So, I'll just add a comment here for Panels and

let's create our first placeholder, which we'll call panel-default.

[BLANK_AUDIO]

And inside, we are gonna give it a padding-top property.

So, we'll make the top padding equivalent to 30 pixels in ems and

we're gonna give it some bottom padding.

And this time, the bottom padding will be equivalent to 20 pixels.

[BLANK_AUDIO]

So next, we're gonna create another placeholder rule for additional padding.

So I'll just go ahead and copy the one we just wrote and

paste it right below, and I will change the name to panel-padding.

And this time, we'll make the padding at top value equivalent to 80 pixels and

the padding-bottom equivalent to 34 pixels.

All right, so now we'll go over to the panel.scss partial

inside the layout directory and we'll create our panel rule.

So first, we'll define the class panel.

And inside, we're going to extend the panel default placeholder.

So we'll say extend panel-default.

And right below,

we're gonna create a new modifier class by including the BEM modifier mixin.

And we'll create a class called panel-centered by

passing the value centered.

So, we'll want the centered modifier to also have the panel default styles,

so we're going to extend the panel-default placeholder inside our modifier.

And we're also going to extend a placeholder helper that center

aligns a container.

So, inside our utilities folder, if we open the helpers partial, we can see

the center-align placeholder selector, so I'll just go ahead and copy the selector.

And back inside our centered modifier, we'll say extend center-align.

Okay, so right below, let's create our new panel-padded modifier.

So, inside the panel rule, we'll again include a modifier mixin and

we'll create the class panel-padded by passing the value padded.

So this time, we'll want to extend the panel padding placeholder, so

we'll say extend panel-padding.

[BLANK_AUDIO]

And since we also want a padded center modifier,

we'll once again include a modifier with the value centered.

And this time, we'll want to extend the center-align placeholder and

the panel-padding placeholder

[BLANK_AUDIO]

So, it's okay to use multiple modifiers at once on a single item as long as

they represent different properties.

So now let's go over to our index.html file and

test these new panel classes on our header element.

So, let's go inside our header opening tag and let's first give it the class panel.

And, as we can see, that added some top and bottom padding to the header.

And let's try the panel--centered modifier, which,

as we can see, centered our header element on the page.

And if we want to add padding to the centered class,

we can then define the class panel--padded--centered.

Which, as we can see, gives us a nice centered header with top and

bottom padding.

So, finally, let's also give the footer element

that panel--padded--centered class.

So, at the bottom, in the opening tag for the footer,

we'll give it a class attribute and define the class panel--padded--centered.

Cool.

So now we have a panel layout component, we can easily customize for any project.

In an upcoming video, we'll apply a mobile first development approach with a grid and

modular media queries.