Preview
Video Player
00:00
00:00
Panel Layout Component
5:34As we learned in the previous video, the layout rules contain styles for the major layout sections of a site. In this video, we're going to create a panel layout component we can use anywhere in our project.
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