[Music]
hey so in this video we are going to be
looking at the Bento stack and what
we're going to be doing is we're going
to be building out this layout that we
have inside of the Bento demo this is
also the layout that's been used for
years on the Weaver space homepage so
without further Ado let's Jump On In now
edit mode for bento is different than
any other stack you've probably used at
the top here we have an entire grid
designer that we can design and
customize for each break point we have
extra small small medium and
large now if we look at the grid that we
want to build we actually want to start
off and design what our grid is going to
look like on mobile devices so I'm going
to use the device viewer from our
measure stack and I'm going to go ahead
and select an iPhone 15 and now we'll
open up this particular demo for our
mobile layout so let's go ahead and
build this now when we're designing
grids for bento essentially what we want
to do is we want to think of an
underlying table such as like an Excel
table where we have to find the smallest
cell that we have and in this example
it's these boxes that are down in the
lower right hand lower leftand corner
and if you'll notice here if this is one
cell here in this particular lay we're
going to be 1 2 3 4 columns wide okay
and let's look at how many rows of
content we have we have 1 2 3 four rows
of content so on mobile we want this to
be a
4x4
grid so if we notice here inside uh
Bento we're going to go ahead and what
we're going to do is we're going to
start off with extra small which is the
default and we're going to Define the
number of columns as four and we want
the number of rows to also be four now
here we can also customize the gutter um
for columns and rows as
well and uh number of items let's just
leave that at zero for now let's go
ahead and build out this layout and
you'll see how easy and fun this
actually is so below our grid designer
you'll notice that we have Bento item
number zero by default and let's go
ahead and change that to be item number
one if you notice here when I changed
the item to be number one it actually
highlighted that directly in here inside
edit mode inside of our grid designer
which is really
cool now let's go ahead and Define the
sizing for this if we look at our
original layout we actually want this to
be two columns wide so let's go ahead
and do that we're going to set columns
to be
two and basically what we can do is we
can add another Bento item we can go
ahead and set that to be number
two and I want number two to also be two
columns wide so we're going to set
columns wide for extra small to be
two let's just keep on adding items
we're going to add in number
three and item number three is going to
be four wide because this particular
item is going to take up the entire
width of my grid so I'm do is I'm going
to make that columns
four and then here we have number
four and number five those are also
these smaller areas so we're going to go
four five and then six is going to be
foundation so let's start building those
out I'm going go ahead and uh I'm just
going to go and copy and paste number
three we're going to make that number
four um but that one's just going to be
one right and we're going to copy paste
and make that one number five
and then we're going to copy paste that
one make that number
six but now number six is foundation
this one's going to be too wide and Too
Tall so this is going to be it's going
to take up two columns and two rows and
if we look at the grid we're getting
very close to what our layout is here
which is really cool let's go ahead and
add our last two which is number seven
and number eight which is just going to
be um a one so we're going to go ahead
and uh duplicate number five and just
make that content number
seven and we can go here and copy paste
that and that has number
eight so there we go I I now can
populate all of these items um with
actual content and we'll do that shortly
but I just want to show you get you
really quick to show you how we actually
design these and let's go ahead and I
can customize these colors as well what
you'll notice is the um colors match
okay we can have we have a highlight
color here inside the settings and that
color will be displayed up here as well
as in the label of each individual item
you'll see it actually tells you which
item number um it is being used inside
the
grid so let's say for like number three
let's go ahead and change that highlight
color let's make that one maybe blue and
then maybe like four five 7 and eight I
am selecting all of them just by holding
down the option key and let's make those
like an orange
color right so now here I have my little
layout so I kind of have you know one
two and six are kind of you know they're
kind of similar sized sizewise and then
four five and four five seven and eight
are small so we can kind of visualize
our grid a little bit here in edit mode
and as you see the colors um directly
for each item will change as well so
it's easy to kind of locate them so you
can see where your items are going to be
placed within the
grid now we had skipped a setting
earlier and you'll notice that it is the
extra small items and in this basically
after you build out your grid you should
put in here the number of items that we
have so in this case I'm going to say we
have eight items I going to click
eight now before we move on to the next
break points I do want to show if you
click on the plus button here you can
actually customize the actual break
points that will be used within uh the
Bento layout so we're not going to cover
all these right now we'll cover those in
a separate video um but just let you
know that you can customize the break
points that are used um for your uh
responsive
layouts so now that we have our extra
small layout built essentially what we
need to do is we need to go to the other
uh break points and Define those layouts
as well so what we'll do now is we're
going to go into
small and now for me I just want extra
small and small to be exactly the same
so I'm just I'm just going to copy this
out so I'm going to say we had eight
items um we have a
4x4 okay and let's do maybe our our Gap
be a little bit bigger let's do 15 for
our gutter so now extra small and small
are going to have basically the same
layout but now we want to change things
up for medium so we're going to go up to
medium you notice that things are a
little wonky right now so let's bring up
what our medium grid is going to look
like so we're going to go over here and
let's Swap this to be say an iPad so as
a reminder here is the layout that we
want for medium and large devices and
what we want to do is we want to find
the smallest common denominator for our
cell size right it's going to be for
this particular layout the smaller uh
items here so if we were if this this
was to be one item let's go this is 1 2
3 4 and then this one is four so we're
going to have eight wide and height wise
we're going to be one two three four
tall so our grid here our underlying
kind of grid is is going to be four rows
by eight
columns so let's go ahead and build that
so I know I'm going to keep the same
number of medium items so let's set that
to eight and then I said we wanted
number of columns was going to be eight
and number of rows was going to be
four okay and um let's let's put leave
our gutters for medium at 20
pixels okay so what we now need to do is
we need to go through all of
our items and adjust the sizing so if we
look at our sizing before we had only
modified the default sizing which is for
extra small and if you remember the
small sizing we wanted it to be exactly
the same as extra small so what we're
going to do is we're going to leave that
as inherit which is the default setting
so for small it's going to inherit from
extra small small but on medium we want
different sizing so what we're going to
do is we're going to click on
size so for bento item number one what
what size do we want let's have a look
at that again so if we look at this
layout essentially if you look at this
icon here it's about the same size as
these four so basically I want this to
be a 2X two and I'm going to want that
for number one number two and then
number six let's go ahead and do that so
we're going to do is we're going to go
to number one uh I'm going to highlight
number one number two and number six and
uh we're going to go ahead and set the
medium size to be two columns wide and
two rows
tall there we go
perfect right now number three okay
number three if you remember that was
the really big one right that's kind of
like and what that was is going to be a
4x4 it's so it's going to take up pretty
much half the grid uh it's going to be
four columns wide and four rows tall let
just go ahead and set that we're going
to set custom sizing for medium and
we're going to set that to be a
4x4 and just like that magic our grid is
now done right if we if we look at this
grid layout it's exactly what we had
defined um and and what we designed
inside of our
layouts and like I said just we did from
extra small to small I want my uh large
grid to be exactly the same so I'm going
to do is here is we're going to large
items is eight and we're going to do um
eight columns not 808 and four and there
we go now all of our items we don't need
to tweak those
because we want the large to inherit
from
medium but I want to tweak things a
little bit I want to I thought it would
be fun to show you um if you notice
there are two options here for sizing we
have size and
position so I can do for large just for
number let's say number
three I want to adjust the position a
little bit okay let's say on large
devices I'm going to go ahead and change
the
position and I want the sizing to be I
would still want it to be
4x4 okay but what we now have a we now
have access to is position we can Define
where this is going to be Loc at so um
by default it's going to be one in one
so if we have this to be a 4x4
cell the position is going to be at
start at column one row one but we can
also start it at column two or column
three right so let's say we wanted that
right so now on medium this large one is
going to be off again flush to the right
but then on large it's going to move and
change its position so that it's
actually centered within the
grid so that's the kind of slightly more
advanced position position setting it uh
again you can customize the sizing as
well as the starting position of that
particular
item so let me go ahead and populate uh
these with content and let's preview our
grid so what I've done here is I've just
added some containers and header from my
free starter pack um and just added some
gray boxes that just have a number in
them so we can kind of see those item
numbers let's go ahead and preview this
so here we are in preview and we can now
see our grids now I have a measure stack
on this page to kind of show us what
where we are in our break points right
so right now we're in small and we have
1 2 3 4 5 6 7 8 right all right here now
what you might notice is number six it
kind of looks a little odd because it's
not actually stretching its content um
we're going to look at that really quick
essentially the by default what what's
going on is Bento has reserved this
space for our content but by default
Bento is going to Center our content but
we can easily make that stretch so if we
look at our project let's go ahead and
look at number six and I'm going to take
the alignment option as you see the
default is Middle I'm just going to go
ahead and set that to be
stretch and if we refresh the page we'll
see that voila number six is now
stretching its height so that uh it's
exactly the layout that we were
expecting let's go ahead and make our
grid a little bit larger and we have a
little issue we kind of have a similar
issue with number three right but we
know the easy fix for
that we're just going to straight go
into number three we're going to set the
alignment to be
stretch refresh our page refresh our
page and voila there we go okay and
let's just keep going and and there we
are now you might be looking at this
grid and be thinking wait but number one
and number two they're kind of not the
same height as number 6 what's going on
there so essentially what's going to
happen is Bento is going to react to
whatever content you add into it here I
just have something very simple it's
just a gray box with a header but as you
put more content either with paragraphs
or with images Bento is going to morph
the sizes of our grid and dynamically
make it all look uniform based on the
rules that we've defined so if we look
here at the Bento uh demo that we built
remember we built this exact grid
essentially what's making these these
items taller is the images as well as
padding that I've added right if you'll
notice down here it's just the images
there's no words so that's going to make
those particular items smaller have I
had titles in this that would make each
of these taller which then turn make the
foundation one taller right so it's
going to all kind of mesh and it grid
will dynamically figure out um the
height that it needs to create for its
containers and it's going to make
everything look
[Music]
uniform