[Music]
so in this video we're going to be
looking at the Bento areas stack now the
Bento areas stack can build very similar
style grids pretty much the exact grids
that you can build with the Bento stack
you can build with Bento areas but the
two stacks take a very very different
approach in some ways Bento area is
simpler and in some ways it's also a
little bit more
advanced so let's jump in and kind of
show you uh why it is both more simple
and complex uh right now so Bento areas
allows us to Define content areas by a
name okay so here inside the areas Let's
ignore these area rules for right now
and let's show you how we can actually
build out um our content
so what we're going to do is I'm going
to build just a generic run-of-the-mill
layout for a web page I'm not going to
use this you can use this to build out
um smaller layouts within your web page
but I'm going to build this to be the
overall layout for our web page so in
here I have defined four content areas
and what I'm going to do is I'm going to
go ahead and set this area name to be
header and uh for edit mode so that we
can use our uh grid designer we're going
to assign this to be area number
one okay so now we have area number one
and it says that we have header right
there okay and let's go ahead and add in
a new area and we're going to make this
be Main and that's going to be number
two and then we're going to add one more
and this is going to be side for our
sidebar and that's going to be content
number
three and we're going to add one more
and that's going to be footer
and we're going to make that item number
four so now that we kind of have that
situated um let's go ahead and look at
what we can do
here so just like other Bento Stacks we
have our preview grids so we can uh see
our extra small is by default then we
have small medium and large and see how
this morphs and completely changes based
off small we have our header then our
main content our sidebar is below our
main content and then we have our footer
right and then once we jump up to medium
kind of some more traditional layout
where we have our header we have a
little bit of a gutter on the left and
the right we have our main content we
have a sidebar and then below all that
we have a footer that goes full width
and that's the same on
large now how do we Define this grid cuz
here we're we're not the other Bento
Stacks were kind of kind of building out
a grid and then we're sizing them by
like you know it's going to be two
columns wide and three rows tall right
um You Were defining the sizes of those
particular items but here we're not
we're just defining labels and in order
to understand what those are we need to
look at these area
definitions right so here is the area
definition that is by default on the
extra small break point and let's this
as you see you'll probably notice that
we have our labels these are the same
labels that we created when we created
our areas we have header main side and
footer now essentially what we're doing
is we are building out a grid with
words now if we look at this I have four
rows of content I have one 2 3 four rows
of
content now within those four rows I
have three
columns here in the first row I have
header is going to take up all three
columns in the second row of content I
actually just have my main and Dot is a
special thing where it's basically like
a gutter it's just empty space we don't
have any content there at all and if you
remember that's the little the little
padding or gutter that we have from this
side of our browser window
windows so here we have a little bit of
empty space and then we have main our
main content area and then we have a
little bit of empty
space same thing in our sidebar but then
in the footer we don't want to have
empty in our footer and our header we do
not want empty space we want the header
and the footer to go full with the
browser window with no empty space at
all so that footer is going to take up
the empty space the the main content
area of the footer as well as that empty
space now another thing that is very
important is that each row needs to have
double quotes in here this is a very
particular very syntax specific solution
um that once you get your head around it
it makes things very powerful and easy
to use but the syntax is very and is
very
strict
now if we looked at when we morphed up
into medium and large devices our layout
changed a little bit and let's go ahead
and do that essentially what happened is
um we have main inside were on the
same row so here we had uh we didn't
have this row at all so in
our medium and large devices we actually
are going to have four columns and three
rows of content now here we have again
our gutter kind of our padding between
the edge of the browser in our content
and then we have a sidebar and then we
have that padding
again now up here though header is only
taking up three so basically what we're
going to have to do is because we want
the header in the footer to be full
width we're going to have to modify that
so that those have four as well now we
see here if you want to take an area and
expand it across multiple columns you
just simply repeat that header um in
this case a header over multiple columns
and basically it's saying this header is
going to take up four columns but how do
we make something expand multiple
rows so let's say for example um I
wanted to have a second content area um
so I'm going to have gutter on the side
let's say we want to have extra here so
this is our extra um and
essentially now since side is in two
rows and it's also matched up to the
same column okay so this side and this
side are in column three and because I
put them spanning across two different
rows that side will expand across two
rows now another thing that could help
is you can actually add in as many
spaces as you want in here so if you
wanted to kind of you know visually see
this so that they're spaced out into
their various um actual columns you can
do that so here we can see here's my
here's column one here's column two
here's column three and then here again
the sidebar is spanning across two
different rows and then here's our
column four let's play around with these
directly inside edit mode and we can
kind of see how things play out so as
you see here inside extra small mode I
can go ahead and let's just go ahead
and start overwriting what we have here
so I have my sidebar and I'm just going
to I'm going to cut that and I'm going
to put it before our main now in order
to add a return here you just do option
and the return key and that will make it
multiple lines and what you'll notice
here is our layout has shifted inside of
our grid designer it now shows us that
we have our header our sidebar then our
main content and then our
footer now let me show you what happens
if I go ahead and turn off these little
dots in the
sidebar and in the
main okay well it kind of breaks things
because we not we now no longer have
three columns inside of our row so that
means something is wrong with our syntax
here so we're going to have to modify
that right well we can do side
side so if we look now what I did is I
added side side and so now our main
content and our sidebar are going to
start way at the edge of our browser now
they're at the edge of the browser
because I'm using found a blank theme
and this bento's area stack is not
inside of a container that doesn't any
sort of gutter right but essentially th
this will start at the edge of the
layout in this example here it's going
to be the edge of the browser but it
could be the edge of your layout um if
you're using this within um other stacks
on your page or within a traditional
theme now what determines the size of
our
layouts what determines the size of
these columns if you look above so here
we are on the large layout and we see
that our header goes full width and then
our main content uh basically our second
row of content which has our main
content and sidebar it doesn't go full
width it has these little gutters okay
and then the footer goes full width um
as well so what controls the sizes of
that and that has to do with the large
columns or the column setting so we have
large extra small small medium and large
columns and if you notice this is has a
set of measurements in here okay and for
large we have four columns so I have
four
measurements let's look at these so here
is our areas grid definition okay if you
notice here we have four columns and
down here I have four
measurements now these are all standard
CSS measurements and we'll talk about
them um but you can use more than just
what is here here I have REM you're
probably familiar with REM one REM is
approximately 16 pixels if you're more
familiar with pixels you can change this
to be 16px so basically column number
one is 16
pixels column number two is 3fr column
number four or three is 1fr we'll get
back to that unit and then one R let's
go ahead and change that to 16 pixels as
well so it's a super familiar um unit
now the FR unit is relatively new and it
might be complet complely new to you
what does that mean so it is a
fractional unit so essentially what what
this is saying is column 2 needs to be
three times larger than column
3 so basically if we divvied
up these two columns this one is going
to be three times larger than this
one in other respects you could say this
is
75% and this is 25%
the same thing right this will work just
the same um that fractional of the FR
units are just something kind of
relatively new um and they work within
CSS
grid so that's fractional units um you
can use any CSS unit you want here you
can use pixels you can use percentages
you can use um you know Vmax V whatever
CSS unit you are aware of you can most
likely use it here okay um now I left
this very wide open um so that you can
do what you want as a power user the
only caveat is you have to make sure
that you define the number of units that
are equal to the number of columns that
you
defined so hopefully now that we've seen
this um we can kind of understand how
this is working now so here in column
one of header this is 16 pixels wide
this one is 75% % this one is 25% and
this last column is 16
pixels in our second row of content this
dot it doesn't have anything there's no
content assigned to it but it is 16
pixels
wide then we have our main content which
is
75% our sidebar which is
25% and then we have again another empty
column that is going to be 16 pixels
wide this is why we have little gutters
on this side and then our footer is
behaves exactly like header so all four
of these columns ma to these
sizes so what we've built here is
essentially this demo that we have on
the Bento product page at the top we
have our header and again maybe you're
going to have inside that header stack
uh the area you're going to have an
impact stack or some sort of large image
Banner that has whatever you want and
then in your main content area this is
where we're going to put your your
actual main content maybe it's a blog or
a product page or whatever right and
then your sidebar that could be maybe a
partial that contains all kinds of
information and links and whatnot right
and then you have your footer which is
again probably going to be another
partial that has you know all your links
to various things on your website and
your contact us and and other things
your copyright and all that jazz goes
down in your footer right so again this
is just Bento here is a webpage layout
tool or a layout tool in general that
you can then put whatever Stacks you
want inside of
[Music]
it