excellent exciting oh man look at all the chat going on so far sweet um let me I actually have a lot of
apps open one second let me let me just quit some things here so we don't have any sort of issues or distractions going
on during the hangout or during the stream don't need V code don't need you
don't need I don't need that don't need mastedon man
okay don't need Discord don't need any of that stuff okay we're
good right how's everyone doing today sweet man we got some a lot of The Usual
Suspects Mark thanks for popping on Mr Cole Josh here as
always the big guy is in the house Mr Workman in the house
excellent excellent oh Tommy's here hey how's it going
Tommy yeah I was just thinking about you today actually Tommy I hope you're doing well um Tommy of Del figer Fame
everybody um Del figger is still around we actually have some plans for it um for all of those awesome
Stacks um they're in the plans
sweet okay guys so hopefully you got a little bit of hype going on today right um you know if
you've joined Hangouts in recent past in the past I don't know month or two um
you may have joined one where I've previewed uh Bento all right Bento I'm
going to say Bento or Bento I know it's probably Bento but for some reason my brain always wants to say Bento okay so
um yeah that's just the way my brain works so I know it's Bento but I am going to
call it bentu all the time so bear with me
okay yes shaved there there's no facial hair I freshly shaven last night so
there we go just for you Sean just for you okay um so hey Canterbury excellent
you're from Canterbury I actually have been to Canterbury and uh I had a great
time your Cathedral there is absolutely beautiful so anyway I have a great picture of my son playing soccer with a
Brazilian soccer ball right outside the Canterbury Cathedral it's one of my favorite pictures like I really love it
he's now 21 almost 21 he was like three then great memories had a good time
great time in Canterbury okay um so but we want to hear
about Bento okay um so if you're curious Paul thanks
for coming on easy fan thanks for coming on too dope hat thank you this is my favorite one I have it in two colors I
got this one in blue so anyway this is my favorite color this is my favorite hat I mean okay um Vienna never been to
Vienna it's on the list though awesome thanks for popping in uh while we uh let me go ahead and
talk about what Bento is okay if you probably guessed let's just
go let's go to the homepage first okay so I'm sure you've been to
this website hopefully you have you know um might be a little important to our
community this website it's definitely important to me okay and um so if we
scroll down a little bit you know this layout right here I get questions
all the time about how do I create this layout Joe I
want that layout and for years I kept saying it's coming it's coming it's coming you
you'll be able to do it it's made with Stacks I didn't like hand coat it it is made with a stack I just just haven't
finished it yet right and um this version of the stack that's on
my website um is actually tightly integrated with
total CS 2 and uh we all know that story I'm not going
to go down that rabbit hole right total cms3 is coming total cms2 will will never ship but total cms3
is okay and uh with that I reimagined a lot of things and one of those things
was this layout needs to happen outside like it needs to be independent we need to be able to build a layout such as
this with anything right um and so yeah
I finally decided you know what I need to get this done and released um it was
one of one of the stacks I wanted to ship this year um and polish it up make it work out of the box with whatever
it'll work with total CS it'll work with feeds it'll work with manually creating layouts okay but we'll go into how you
can create these and it's not just this exact layout right it's very customizable as you'll
see now 's another layout that I constantly get um questions about and
that is on my stacks page okay um this layout right
here so this layout um can also now be done with Bento okay um and so as you
see it is a very similar style of grid um they're there're two different Stacks
okay um but is a very different style of grid um whereas the one on the homepage is very fixed right you have a defined
grid and that is it right um You have a defined number of items that's it whereas this one it's
meant to just have kind of an unlimited amount of items okay so you'll be able
to add as many items as you want and we can create rules that
will basically create this grid for us um and funny enough uh we'll get into
the actually how I created this exact grid okay um using
Bento so without further Ado let's go ahead and uh have a peek
okay so I'm going to start actually we're going to start with a with a new page uh actually be before I before I
actually jump into this I do want to say um this is a pre launch launch right so
what does that mean I've I've never really done this before okay um
and Bento I I think the stacks are ready I they're they're done they're
solid but I just feel because they're so different than what we've had before um
I would love to have more real world experience so that I can make them
better before we like before I announce them to the entire world basically right um so I
thought it would be fun to do a pre-launch I know there are a few users that really wanted to get their hands on
these and really start using them with real live layouts and data and building
actual things on their web pages right so I thought it would be fun to do a
pre-launch this is a 1.0 product this isn't beta um I'm confident that is is a
great product set and you'll see how it functions we'll go over all of it but I
wanted to give you guys the ability to buy it now because I
I do I am working on demos like building out various layouts and demos and
there's so many possibilities that i' I'd also want to get pick your brains to see what you're building so that I can
take that real live information build the final product demos for the product
pages so that everyone can see the potential of this okay so yes if you
want to be a guinea pig for me for building out demos um and you know hey if you got ideas and you came up with
hey I want to create this obviously I'm going to you know do my best to create layouts and add settings and add
features and whatnot to um build this okay so there is a I added a new space
to the community it is just for this Bento pre-launch okay after after I
officially launch it this space will probably be going bye-bye okay um but it
is a place either if you want to be a fly on the wall you can join this space
I've added nobody to it so you can go you should see it over here in the sidebar
okay um go ahead and click on that and then you can join the space and then you can create posts or ask requests and as
you see the very first post here is the buy link there is no product page actually for bento yet okay um if you
click on the buy link it takes you literally to the checkout page okay so
um it'll check out you will download it you will get the demo file that we will see right now that I'm going to be using
and uh so that is kind of how the pre-launch is happening um when will I
officially launch it I don't know it kind of depends on how long it takes you guys to create cool stuff so that I can
create a really cool demo uh because cuz I think this has a lot of possibilities and um I think together um you know
we'll make it better okay so there we
go okay cool let's dive in all right I'm
actually going to dive in I think it's actually easier with with Bento to actually show you how to implement a new
one versus going over examples we'll go over all the examples and and how each
one's kind of different from each other okay um but let's go ahead and create a completely new a new page okay um I do
have to also say Bento does not require Foundation okay it doesn't require none
of my stacks require total CMS none of them require Foundation like okay like
even Foundation Stacks don't require Foundation to some extent I have FAQs on
that okay um but anyway I think we should all be using Foundation but with
that said Bento will work in any theme okay
so uh let's go ahead and oh it's not in this group anymore
shoot all right we're going to start off by looking at Bento grid okay um and the
Bento grid actually I think I might just name this rename this one to just Bento
okay um I actually thought I did but apparently I didn't rename it to Bento
um so Bento grid is the version of Bento that we have on the
homepage okay uh where it's defining a static grid I think this is the best place to start um kind of learning how
the concepts of Bento work because another thing with Bento is it has an
edit mode interface like no other stack we've ever used before okay another
reason why I actually want to kind of ease into it just to kind of get some feedback on how this edit mode interface
is I think I've nailed it I think it's really really cool it's Innovative and
I'm excited to show you right now okay so when you add Bento grid to the
page okay uh here let's go ahead and give us some more space
here so when we add Bento grid to the page you'll notice that we have this setup grid buttons okay in the settings
and you'll see that we have extra small small medium and
large now what what is all that essentially um what we're doing is we're
defining different grids for multiple break points okay and I know you're
going to want to ask this what are the break points well if you click this little plus button you can actually configure exactly what those break
points Point are now by default these match the foundation six break points but you can customize them to your
hearts to your heart's extent okay um there's actually also another cool um
breakpoint basis um which we'll talk about later okay I don't want to go down that rabbit hole right now okay I just
want to talk about building out a grid so here I have a grid of 16 items
and within this grid of 16 items I can place my
content okay and so how do we do that first off we can say what is my grid so
I'm going to have here we have four by four so I can do you know let's say I want five columns by five on large okay
so now I have all these cells that I have access to now you might think well that's just
a grid how am I going to build these cool layouts that are different when all I see here is a grid of
cells okay so let's look at that so by default we add in a Bento item okay and
if you notice up here we can now Define our grid definition for this item and
I'm going to go ahead and set this to be item number one now if you notice when I set this to
be item number one okay magically um we can Define we can highlight okay it will
highlight that particular item in the grid for us and guess what I can change that right so if I'm like I want
different one okay let's go with that there we go so and if you notice actually I also
changed the outline of the edit mode item so that it kind of matches right and I also put Bento item number one
automatically right there in the um little stack title pretty cool right now
here we can now Define our sizing now right now we can tell that we are on large you can see it's right here um in
the top right corner it tells us what grid we're previewing so right now we're looking at large so let's go ahead and
customize this so on large let's say I want this to be a 2 by
two so you see here in large I said it to be a width of Two and a height of two
and it took exactly that much space in my grid okay so now this item is going to
be proportionally to all the other items that size let's say we want to go a little bit higher let's let's make it
like a 2x3 right pretty cool okay let's go ahead um I'm kind of
happy with that let's go ahead and uh let's add another Bento item and this time we're going to make it number
two and here we go I have number two I then have the flexibility obviously to
customize the size of this one right and actually let's go ahead and um
for fun let's go ahead and replicate the uh oops not that one let's go ahead and
replicate this layout right here okay let's visualize this layout
here what's my lowest common denominator cell okay it's these guys okay so um
this is obviously going to be a 2 x two that's a 2X two that's a 2X two this one's going to be a
4x4 right so that means two that means uh 2
48 wide by 2 three four tall let's build
that grid okay let's go ahead I'm I'm going to go ahead let's back up a little bit I know I was kind of showing you things but let's back up a little bit
I'm going to make my large grid I said it was eight columns okay by four
tall okay um let's reset here and um item number one okay right
let's look at item number one that was a 2 x two okay so item number one is going to be a 2X
two awesome and uh I'm just going to copy and paste that item number two okay
was also a 2 by two right so there we go that was a 2 by
two okay uh and for fun let's just change the colors because we can there we go there's item number two okay um
item number three okay that one was a 4x4 right so let's go ahead and uh make
that one a little bit different color or let's go lighter there make it green all right just for fun um these
colors are only for edit mode they have zero it's just so you can map um where
items are none of this is actually related has nothing to do it none of it is actually ever Mi it to your actual
web page these colors okay it's purely for you to visualize your grid um this
one one is going to be a 4x4 okay pretty cool okay um and then we
had let's say uh number four five four and five were one by ones okay so we do
do let's do number four let's let's make those all one by ones
one by one and we're going to do um four
five okay and then um I I know this is going to be number
seven and just a and that's number eight okay and then
uh number six is going to be oops that one was a 2 by
two all right number six going to be a 2X two 2 by two so there we go look at
that exciting okay so um I've built out that
grid there we
go Oh Martin asked asked an interesting question what is Bento okay where does
that come from um so yes someone already said it's a Bento Box and actually so if we go to the
community right and go to Bento right these boxes it's a normally a Japanese
thing normally they put Sushi and other things in it but if you notice the boxes are kind of you know these unusual
patterns of boxes and so they call those a Bento Box so um there we
go okay so where where was I talking about okay um
got off on a tangent when I started looking at the chats um now I broke my concentration so we have this data now
right um so I can go ahead and add some content to it let's just go ahead and add uh doesn't really matter let's just
go ahead and add a uh uh let's add in a just to make this
simpler I'm going to add in a container and let's add in a picture stack I'm
just going add the same one to everything okay just so we can see um just to keep things a little bit quick
we'll add the Weaver space PNG whoops what I do
there there we go oh man that's big uh
let's do a fill container and scale image to like um 256 Max width okay and
uh Center image all right I'm just going to do the Weaver space logo in each of these right
so let's just go ahead and I'm just going to Let's copy it into there each
one actually you know what we want a little bit of padding too probably let's just go ahead and do um P
24 no uh P
32 oh I don't have I'm not seeing because I don't have site styles on the page there we go hold on one second
let's just add site style so we can utilize our uh there she no we'll keep
that off so people can see things all right I thought 24 was one yeah there we go okay
p24 all right so let's just uh copy and paste that
in paste that into each of
these all right there we go and uh let's just
preview oh man uh that's I think it's it's probably easier to see when we have
uh background colors turned on because as you see it it did it did create the layouts that we have a 2X two and the
3X3 all we need we need colored layouts uh at least for for that I mean
just seeing logos all over the place in that particular design probably doesn't look too great
um okay but I hopefully you saw the concept of how this is right now um so
we built our large okay uh grid and then what then
next what we're going to do is we're going to go down to medium okay and at that point we need to design our grid
again and then you kind of go through and you define where number one is going to go right the size and and um know how
big is number one going to be because right now it's by default it's just a one by one okay so um I'm not going to
go through and build this again for medium um we can now start diving into
you know maybe some of the examples I also want to show you B to scroll but we'll look at some examples here of B to
grid first okay and then after medium you would go down to small and then after
small you go down to extra small okay and uh so yeah there we go
uh stack seems much snappier than on my 2016 MacBook Pro yeah so um I actually came from a 2016 MacBook Pro um like a
month ago I got a new Mac Studio and um however I on my 2016 I mean it was still
pretty decent um on my 2016 MacBook Pro when I used it all the time I kind of
had I did have an external GPU that I had Plugged In which I think helped but I used it a lot without that too so
anyway um okay let's go ahead and start looking at some of the other demos let me see if
there were any questions that I missed someone asked did uh FileMaker
yes FileMaker did have a product hence also Apple had a product called Bento um
and it's kind of I actually really loved that product when it was out and um yeah
I I've never forgotten about that product it was a good product so I did kind of steal the name from that too um
even though I mean Bento really is exactly what I'm building we're we're building Bento
grids wallpaper for the win yes so um as Josh re saw said in the chat here um in
this demo here I'm I just use wallpaper um it just makes for a nice looking demo
okay um and uh because you could just kind of Chuck in wallpaper have a nice
pretty gradient and uh Scot your uncle okay um so let's go ahead and look at
some of these demos here so here's just a very simple grid um let's see it looks
like that on mobile um on Medi on I'm sorry it looks like that on large on medium I actually just to kind of show
you how you can completely Swap and change directions of things right on medium I swap number one over to be a
different location um on small small and then small and extra small they kind of stack
on top of each other if you're curious what's small and extra small so that is something that Foundation doesn't have
um essentially small targets most mobile devices were extra small targets like
the really small ones like the iPhone 3s and iPhone 4S and iPhone I think after iPhone 5 is is it was kind of when um it
stopped but you can again you have full control over all of these so you can configure whatever you'd like for those
um so yeah let's look look look at this example here on what we can do okay uh
because some of this use uses a couple other interesting features that I haven't reviewed yet okay so in this
example here we'll notice that again on large um it the number one well two
things number one is over here and the number one actually isn't even visible okay that was because I was testing
something else which will'll show you also um and then on medium it flops over
here so when we set up number one let's go ahead and uh look at large
okay um before we've only looked at this item sizing where number one is a 2X two
okay it's actually a 2 x two on medium and large however okay um what I did was on
large I make number one start at column number three row one so by when you
click on advaned positioning you see by default number one wants to start at the
very uh far left right but I can actually customize the positions to be wherever I want for this item so when we
click on Advanced positioning we can now Define the start and ending positions or
the start positions um of by column and row okay so if you know I'm starting this on
column three so 1 2 3 and I'm starting it at row number one
okay you you know you can start it at row number two as well um that doesn't necessarily make sense for the number of
layouts for the layout we want to build right but just to show you you can start it anywhere you want and kind of
position your items anywhere inside the grid and have that move for each
individual break point which is pretty cool uh we also have some alignment content um you know
issues here or issues uh features so you can you know align that content in the middle or have it stretch or going to
the bottom so on and so forth okay now if you noticed
here I uh when when we previewed this on large the number one
was not visible okay and so Bento actually ships with some utility class
that allow you to show and hide things based on the break
points so if we look at this header I have a class here that says Bento hide
for large up okay there's also Bento hide for medium up small up extra small
up okay um so what this does is it will hide this particular item on
large now why why are these useful Okay so
if we go back to the uh homepage here okay if you notice this particular
layout I I actually display different things based on the
size right so on this particular item here um or on all the larger items I
display the icon as well as the name of the stack as well as the little
subtitle however on these smaller ones I I don't have that much space
right so I don't display all of this data right so um utilizing utility
classes now if you're manually building this with Stacks then you don't necessarily need these okay but if
you're using something like um you know feeds or whatnot um or
total CMS to populate the data these utility classes could be very
helpful okay so the this is an example again of those
utility classes in use um let's see I think that was the
only thing in this demo kind of showed the positions I think that was it yes okay in this demo we showed the
position the advanced positioning as well as the utility class okay um this
is the one we
created let's look at so here's an example of Bento with feeds I just want
to uh this demo here if you obviously this file I should say this is the one you you get when you purchase so this is
download you can see exactly what all these are I will probably be updating this as we're designing and coming up
with more ideas and I want to you know have more examples based on your questions um that you
have so in this example here I have a Bento grid okay and here I'm actually
generating my data my content using
feeds okay um prior to uh this page I've
been using the Bento item Bento item um child stack but you'll probably notice
that there's also a Bento Rule and a Bento content okay um if you're
generating data for a Bento stack you're not going to want to use the Bento item
okay because we want to have the rules and the content kind of
separated so um here's an example of that so here I just have some CSV data
with just some names okay and uh here I've actually added the Bento content
stack and then here I've used you know the feeds data all I'm doing is injecting the name into a header okay
then above um outside of the feed stack I've but inside Bento here let me
go ahead and turn off streamline edit mode sometimes people get confused with
that so in Bento grid I just add the feeds inside of Bento grid and then
inside the feed stack I would add my Bento content and then feeds obviously will go
through each one and create a Bento content for each individual item in the
feed then above feeds we can then add a Bento rule again these are both inside
the child stack and the settings for these rules are exactly what we had in the item it's just um this decouples
them okay so here I can now design my grid just as I did before we can have
large medium small and extra small okay and I can Define all my sizing and my
highlight colors just like I did before okay there's just that this rule stack
doesn't have content associated with it it's just the
rule so let's preview this so here we have a um the grid okay
and as you see it's populated with feeds and the grid changes based on my
grid definition
rules pretty cool right now funny enough I have measure on this stack or on this page and funny enough I actually built
measure to help me build debug and build
better things with Bento okay um and the reason for that
is I'm going to jump examples here the reason for that was this this
page okay let's look at this example this is
kind of more of another real life example of what we can do with
Bento and if you notice it's just a simple card layout okay um the Bento is
inside each of these cards okay so um I have three Bento oops my page changed I
have three Bento grids on this page and they're they're all the same exact grid okay uh they're
just three individual Bento grids right uh each one is inside of a card stack um
and then the grid is for the actual content of the
card now normally what we'll notice here
is again this is the same exact Bento grid yet the layouts are slightly
different okay and the reason for that is these Bento grids if we look at the
breakpoint setting another thing about the breakpoint settings some Stacks if you show and
hide this it actually like turns on and off those settings this just shows and hides the settings um whatever you
change these settings to they will always be in effect if you it this plus
and minus thing purely shows and hides it okay um so these settings are always
in effect no matter if you turn show or hide them okay um they're just a way of
setting them if you need them okay okay um so but if we notice here uh I
have the breakpoint basis by default is set to viewport I have it changed to Bento
container now what does that mean now this is something that I've I've never shipped in a stack before and it's um a
different way of sizing our designs okay um now based on how we react to it and
use it in Bento it will definitely be coming in the next future versions of foundation okay um I
do I do tend to like to introduce kind of new sort of paradigms or features in other Stacks before I integrate them
into the large major framework right so this is our first forway for
forway for well however you say that um
into container queries now what is
that so normally uh when when we think of break points we think it they're
always tied to the actual size of the browser so if my browser window is 1,24
pixels that break point is for that particular pixel size that browser
size but container queries give us a different way of
thinking what they do is they they allow us to measure our break point based on
the width of an item on the page so in this case I can customize the
layout of bentu based on the width of
bentu so if we look here let's go ahead and go all the way down to a smaller layout now when I go to a small layout
you'll notice that now all three of these cards look the
same because I literally these grids are the same I just copied and pasted this card stack um on the page three times
the only thing is this bottom one I put inside of a two
column so if we go ahead and start making this larger we'll see that at a
particular break point right there this particular card changes its
layout but these ones down here don't and that's because these cards here
never reach the width of these now again I kind of I think I removed it from this
page but let's go ahead and play with it right so measure let's just add a measure stack to this page let's just
add it right in between there just so we can kind of see okay and for fun let's go ahead and add it here um I'm going to
add I'm going to make this one uh the browser let's go ahead and make um
um let's make this one uh the parent I'll make this one the parent all
right there we go all right let's preview
this oops did I mess up something here uh is it in the oh position relative
aha here let's shove it inside the card it should be inside the
card all right there we go actually it should be inside the card
section to be honest with you there we go all right because we're measuring the
width of bentu itself right okay look at that now there we go okay so let's just
look at this here um let's look at my grid here so um
I said at 600 pixels is medium okay and I'm pretty sure that is
where there on medium if you notice if we look at the layout small the layout looks like this medium the layout looks
like this so on medium which is 600 pixels this grid changes
so let's go ahead and go down okay we're now at um
554 these cards down here are also at 554 okay and the browser is at 574 I
here let's just remove the one from the browser I think that's just going to be confusing
okay so once my layout reaches 600 pixels it's
go oh
interesting it's oh this I bet you this card isn't oh interesting uh position
Das relative interesting I'll have to I'll have to look into that for card or for
measure I'm
sorry oo interesting I think it's right I don't
want to debug card right or measure the measure stack right now that's interesting okay um it's not taking the
padding into account here so it's going at 600 some odd pixels here okay
635 um it it's breaking damn I need to I need to I
that's going to bother me until this afternoon when I can go fix that or figure out why um I'll probably update
the demo file as well if you have measure you guys can play with it okay um because this is exactly why I built
measure um so that we can measure things like this but with that said you'll
notice that at a particular break point this one breaks but these ones don't the
reason is because the layout of this is based on the width of Bento itself and
Bento down here hasn't reached that width yet in fact it never does right it
never reaches over 6 600 pixels because because it's inside this
two column so this allows us to kind of make
reusable components that will react to the environment it is inside the layout
that it is inside right um so yeah very interesting um this is something again
called container queries um and if you want to play around with them they are very interesting they're interesting way
to use um you know Bento and create different sorts of layouts now or
reusable components so that if this was in a grid or in a in a sidebar it
behaves one way if it's in the full width page the layout's different right so something pretty interesting
there okay this this example does one other thing uh let's go ahead and uh
remove measure for now so we're need to look at that now this layout let's look at this
top card this layout seems pretty simple right um I just have an image why would
I need Bento for this it's just an image with a title and a paragraph down here
and then on down here it just kind of shifts over that layout looks simple um however
it is not possible using columns unless you try to employ some
hackery okay um something like that just is not possible so let's look at at how
I built that layout and I just realized it's 12:15 and I haven't even looked at Bento scroll yet okay um so if we look
at this Bento grid here you'll look at here the um column for number one is set
to two items High okay so that that's the image that's my icon and that goes to high and
then on small it goes one it's a 1 by one and then the the third one expands
out so with this sort of layout we have a lot of very EAS this is much easier with Bento than it is with a normal
column stack okay um another thing uh I proba
I'm not going to dive into it into all the details right now but there's also Advanced sizing where you can actually
Define custom sizing for columns okay
um most of the time you're not going to want need this uh in this particular example we actually do need it okay um
it just has to by default um Bento is going to always want to kind of equalize the The Columns so if we look at column
one and column two here um we can go ahead and equalize these columns or um
not equalize them so I wanted to find some custom sizing for those and we can Define that for all
breakpoints and the definitely is sort of advanced because I couldn't come up
with a nice way of creating settings around this okay other than just having a way for you to type in the options
here and this is some new CSS units that I bet most of you are not aware of um so
like for example I could do something like uh 50 pixels right uh or we're at
we're oh we're at small so I can do like you know 50 pixels okay and if you notice that actually did change right um
but so you can actually do pixel based sizing um Auto will basically allow to fit the content which is what we wanted
right we want to we want the column to fit the RO that image okay um and then there's this new unit called
fractions um which um I guess I'll do a brief interaction with this um so
fractions think of you have a three column okay and um you have three equal
columns on a page and they are all one F they're all equal they're all the same
fraction okay now if I take column 2 and assign that to be
2fr okay what that means is column two is going to be two times bigger than column 1 and column
3 okay so essentially it just means if column 1 is 1fr column 2 is 2fr and
column 3 is 1fr Right basically means column two will be two times bigger than
column 1 and column 3 pretty interesting it it it's a very interesting unit in a
new unit in CSS um it allows you to do kind of fractional um math rather than
saying okay yeah I need this one 25% and this one 50% and this one 25% right um
You don't need to do that math in your head just say I want it to be a fraction uh which is kind of interesting so
anyway um probably more on these later on um definitely semi Advanced but it
once you kind of get maybe some ideas um it's not too crazy
and you will have to have so if I had if my grid was three columns wide and this one's only a 2 by two um you basically
have to have a a unit here for each column okay or
row so anyway all right that's enough about that um let's go ahead
and uh shoot let's go into bent two scroll
okay this this one's kind of cool okay so um in this
example oh this was interesting I did this on a hangout okay uh I forgot about that uh let's go ahead
and I'm going to hide that one for now all right cool all right so here um
uh in this uh demo okay I'm actually using I use particle generator which is
a part of my slot machine Stacks to generate a ton of fake data okay just to have a really nice layout
again um we've already seen how you can use feeds um I don't have an example yet
of total Loop U but you'll be able to use total Loop here as well you can also use total CMS integration with through
feeds okay um but you can definitely use total Loop um in
here I don't think we'll ever get blog list in here you'll have to use total Loop okay or feeds for for for a blog
list okay just I know someone's going to ask that it's not going to happen Okay
for this one this this one is far out way different than something like moving box where I I was able to kind of hack
it in there okay um right so here I'm just using particle generator I'm not
going to explain what this does essentially it just generates um 50 items based on some sample data sets and
it created here 50 different items that I could then
Define my layout for all right so again I'm not going to
review particle generator just believe me that it generates 50 random blocks
that have different colors and different sizes for us okay um and just
like the when we did feeds in the Bento grid there are two stacks we have a
Bento content and a Bento Rule now if you wanted to manually oops um if you
wanted to manually let's go ahead and turn on off this so people can visualize things a little bit
better let's shrink that and Shrink that
um basically we're we have there's two plus buttons for bento scroll there is
your Bento content and your Bento rule okay um so and those behave exactly
like they did inside the Bento grid where you add your content down here and then you add all of your rules up
here so what are rules and let's let's start looking at
the rules so in this first rule we'll see
that um we have the ability to actually I'm going to go ahead and
just like we did on the other page in order to demonstrate the rules we're going to go ahead and add a new instance
to the page right Bento scroll
okay and uh let's go ahead and make it make this a little bit bigger so we can play around and see all right so um
inside Bento scroll um you can either do an auto Grid or you can do explicit grids like we did
um inside um Bento grid now with auto grid you can
actually choose the minimum width and the the minimum width of each one right so it's going to build your grid based
on how wide you want each individual cell in the grid to be okay so um if
they can be you know if you allow each minimum width uh to be smaller you can get more you can get more cells on each
okay um or you can do an explicit one where you're like just like in Grid uh in the
Bento grid you can choose on large I want three or I want you know five or
whatever right okay um all right so let's play around with what a rule
is what a rule does is in Bento grid we allowed you defined a rule was one item
but here I can't it's impossible for me to know how many items we're going to have in here because so I need to create
general rules for this layout so we have various ways of
targeting items we can do the very first item the last item all odd items all
even items an exact item so like the 10th one or the fifth one or something
like that the nth item so like every third and then you can also do a custom
CSS selector okay so let's do nth I think this is going to be a good one so here we we can Target every third item
and as you see just like Bento grid it nicely highlights each one so we can see what we are are targeting and then we
can now size those things so let's say for every third one I wanted those to be
a 2 by two so if I can grow The Columns by two and I can click on rows and I can
GL grow the rows by two as
well so here I'm starting to build out my grid and then based on that I can add
another Rule and let's say um my very first item right and let's change the
color a little bit my first item I want that to be um let's just well I'm just
going to Target large for right now I want it to be a 4x4 right I want it to be really big and
that looks really really big actually let's do
three right a 3x4 make it taller okay so there we go so now we're we're kind of
getting towards some interesting things right and then uh you can add another rule all
right you can just keep adding these rules so instead of first item let's go to every um let's do the exact item so
let's say on the 10th item okay on number 10 I uh I want this to
be I guess that's special on the 10th item I want to expand that one to be
um a 3x1 right so you see we can kind of build out this grid of rules to kind of
give us some sort of random nature right so this is a this is a
really cool again this sort of edit mode interface is totally new okay um I think
it's pretty interesting and intriguing but it's completely new never done before to my knowledge
okay um so yeah so now we can build out these rules to kind of Target and create our grid now you might be thinking well
Joe like how how am I going to do that like okay let's look at this now now that you see how we kind of can use that
to build out our grids let's look at the real life example okay so let's go back
to this example here and see what I did all right I actually did a lot probably more here than I I should have um I
think normally in grids you're going to have like three or four rules tops okay
um I think I was showing off some stuff in this and I kind of went a little overboard with these rules okay um but
normally here let's like let's
delete well let's look at some of these so here we already see this is nth item the third so this is going to do the
very third item or every third item right let's change the color so
it's okay and then this one does every fifth item right and then this one does the
very first item which is number one and this one does the nth item okay now I
should have to note I think I was playing with this I was showing how things over Road each other okay um
because for example here I have the third item every third okay but number three
isn't um isn't getting applied here okay because down here I have every odd rule
okay um so I'm here this particular one is finding every odd item okay I think I
I should delete that it's probably going a little bit crazy there we go so that that every odd one was basically
overriding potentially previous rules right so um your rules do have hierarchy
um to them uh so that you can kind of build very interesting layouts let's go
ahead and see how that changed my layout so here we go as you see this is
building a very intriguing very interesting
layout now one thing I I I hid before uh which is interesting is I wanted to so
all this data here is dynamic right it's getting generated
in this case by particle generator but it could be generated by total CMS or feeds or whatever okay it doesn't
matter uh Bento doesn't know about it just does the layout it's up to you to
build your your content so inside here uh I wanted let's
say inside of my Dynamic data I want to inject an advertisement okay I think that's going
to be a common thing um so here what I did is I added underneath the particle generator that generates all the content
I added one piece of static content okay and um it's just and I put
a custom class on it called advertisement if we look up here I have a Bento rule
for advertisement okay and what it does is
it will actually um move this item to be in the First Column third
row right so there it goes that custom advertisement is now in the First Column
third row so it's kind of mixed in with my Dynamic content
it's pretty interesting so now I you know if I wanted two or three of these I can then position these throughout my
layout and kind of you know I think advertisements is a is a clear use case for this where you're going to be you
know integrating Those ads within your dynamic or static
content okay so I think that's pretty
interesting um I forget what this last demo is
here uh I forget exactly what I was doing here I think
here I was just kind of playing around with different uh customizations for each um kind of get an idea uh yeah oh
here I was this this I'm building this is the layout for the actual Weaver space homepage um so yeah this is I was
building that exact layout um so you can guys can kind of see how that layout is built using
bentu okay well guys um there you have it um
that is that is Bento um I think it's super powerful and um I'm I am really excited
the whole point of this pre-launch was to get it into your hands so that we can
then work together to come up with amazing layouts um together so please go
ahead and join uh the benu space on the community okay um and I see some of you
have because some of you have already liked the post um you can purchase it here I saw Brian that you said there was
some sort of stripe API error I will look into that right now um and I'll
post a reply here on the community okay um with uh with what happened um maybe I
I put the wrong link or something I'm not sure what I did or maybe it's just a temporary glitch um but I'll definitely
uh look into that um cool any other questions um let's see
let's before we leave let's see if there I missed anything can the stack be used to be construct full landing pages or is
it used to limit the specific sections on a
page um I
mean are you thinking to use this to like build the entire structure of a page um I don't see why that couldn't be
used um for that um yeah especially B to grid like if you
if you used it as like General layout for your page like this is my header that's something we can definitely play
play around with um and you know if if I need to add anything we definitely can
um you know to do that but I don't see why you couldn't use this as a general
all Global page layout you know utility um you can have bentos inside of bentos
that is possible um so yeah um I don't see why that wouldn't wouldn't be an
issue Albert um but yeah if you want to help play around with that um you know
definitely you know do that so let's do it uh why is
three oh I I why is three smaller than six and N um sorry I'm not sure exactly
uh why you were what you're referring to there I'm sure was in the demo um but if
you want to join Friday um we can have a live you know hangout on Fridays and I'm sure I'll be
Fielding questions about this and you know you know speaking about why is this item larger than this item um and
whatnot I feeled a few of those questions in in past Hangouts um and uh yeah we're able to figure that
out okay I think yep okay I think I I think I
answered all the questions sweet guys um I hope you yeah enjoy Bento uh I think
it's I think it's pretty cool there definitely is again something different about like it is very different than
other things out there but I think I've I've given us the ability to create
these pretty complex layouts okay um visually right um it was not easy it's
it was it was a challenge and it took a lot of thought thinking on how to create this sort of edit editing layout within
edit mode and I think it's I think it's pretty simple to use for building
something like these these particular layouts
um uh Mark ask will there be a summit this year so I was I've been waiting for
um Stacks I was waiting for Stacks Pro I I really wanted to have a summit um with
staxx Pro for us and um you as you know probably you probably are aware of Isaiah's situation
he had a skateboarding accident and uh he's been MIA or out of commission for a
little bit um so that definitely delayed things more than I would have cared he is getting back to work though um he's
actually has been getting code done um in the past week or so um so he's recovering and uh yeah it has put a
little uh hamper on our timeline so I I've been wondering what
to do about that since it since it did hamper the timeline uh I I may do a
small like one-day event um I'm talking to a few the normal speakers to see maybe they'll maybe if
they want to speak but I I do think maybe doing a a one day or or something like that um you
know by the end of the year could be interesting I it's quite short notice to do something but I think a one-day thing
we could put together um I don't think I'll be able to do a three-day Summit um you know by the end of the year uh but
maybe we could put together a one day so if if you think that's interesting let me know um yeah shoot me an email or
post on the on the community um and I'd be happy to uh to try to put that together if someone's interested with
that so cool yes it is a visual CSS grid if you
didn't know the the the technology behind Bento is CSS grid uh which is like the latest CSS layout Technologies
right so um this definitely does use CSS grid and it is way of you know handling
all of that so cool thank you very much everybody I hope you enjoy this I can't wait to see you on the Beno space um and
the hangout on Friday where we can then talk one-on-one um and uh you know see
what you're building with Bento and uh give you some feedback and give me some feedback so I can make it even better so
cool take care everyone we will uh talk to you soon have a great rest of your week and go out there and make your
websites great bye