Transcript

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