0:00 [Music]
0:08 in this video we're going to look at
0:11 button bar zones now the zone is a child
0:17 stack at the button bar then it allows
0:19 us to align elements within the bar and
0:23 put other items other than buttons into
0:25 the bar to create our menus so let's
0:29 start by just adding three buttons to
0:32 our bar now the bar receptor Center we
0:36 can see how our preview display just at
0:40 the top right of the stack so if we
0:41 preview that we get three buttons in the
0:45 center of our page now we can obviously
0:49 do quite a lot with that we can stretch
0:52 the bar we can write a lie on it we can
0:55 have it stretch like that we could have
0:58 the buttons to the right but just for
1:01 the moment we're going to leave it on
1:02 stretch now with the dumb stretch
1:05 obviously those three buttons will
1:07 stretch to be the full width of the bar
1:09 but the reason we wanted stretch is
1:12 because we're going to add a zone and
1:16 what we're going to try and do is make a
1:17 sort of traditional menu with a title
1:20 bar and that some social icons or
1:22 another button so if we have its own
1:25 wing citizens a pale yellow colors that
1:29 are easy to see we can drop other stacks
1:33 into the zone now if we want to make a
1:36 title well let's drop the header in
1:39 there in this case it's a header probe
1:41 and we'll just set that to you site
1:44 title so we'll preview that and you'll
1:50 notice now that by default that zone has
1:53 got equally spaced with all our buttons
1:58 so we've got four items in the bar each
2:00 of which is going to get an equal space
2:02 and if we responsively resize the window
2:07 those spaces follow that
2:11 now it's not always easy to see where
2:16 the zones are and that's why your
2:19 alignments aren't doing what you think
2:21 they should be so in the main button bar
2:24 stack in our edit mode helper features
2:27 we've got a zone layout alper now what
2:31 this will do it will just give us a
2:33 dotted line around our zone in preview
2:36 mode so we can see now that our zone as
2:42 we need was the same size as our buttons
2:44 and our header is left aligned now what
2:52 about if we want a logo next rider so
2:56 let's drop an image into that zone and
2:59 we'll put in the button bar logo now
3:07 obviously we want to limit the size of
3:10 this so let's make it 48 pixels that's
3:15 all screen sizes well other previewing
3:18 we'll see what we get now you can see
3:20 that the zone itself is equally spaced
3:24 in the bar but its contents have got
3:27 half of the zone each which isn't really
3:30 what we want so that's because the image
3:36 is obviously centered if we left align
3:39 our image and the image is going to be
3:46 at the left of that's half of the zone
3:51 because the header is taking up an equal
3:54 amount everything in with in zones by
3:56 default will get equally spaced and just
4:00 just to show you that if we just add a
4:02 background to the actual start of the
4:04 head of stack you will see that the
4:08 header is taken up that amount of room
4:10 which we don't really want
4:14 so in our own settings is quite an
4:17 important one in our content settings
4:20 will see these alignments and let's just
4:23 leave in preview mode so that we can see
4:25 and at the moment the the default
4:31 setting will use whatever the static
4:34 settings are so we might think well
4:36 let's write a line that zone nothing
4:38 happens well the content has got nowhere
4:42 to go because this image is that be all
4:45 this white space belongs to the image
4:47 and the header is as big as the header
4:51 background the gray so we need to sort
4:55 of understand when we can and can't use
4:57 these and for this we've got the content
5:00 fill setting here below now in this case
5:04 we want our content to be in mind we
5:06 don't want them to take up as much room
5:09 as they can in the zone and I'll look we
5:14 now have our right alignment because the
5:18 image is taking up the space it needs
5:19 the head is taking up space which needs
5:22 is all this white space so there's
5:25 somewhere to write a line to so if we
5:27 click center it will center line it and
5:30 left obviously left aligned which is
5:33 sort of what we want for our site title
5:35 and our logo so let's get rid of the
5:40 background of our header that's what
5:43 look very good for the time being let's
5:47 add some social icons to the right hand
5:50 side of our are so we can add another
5:53 zone and we want perhaps three round
5:59 icons so tool for the job is the button
6:04 group now the button group defaults to
6:07 three buttons which is quite convenient
6:09 you could add a three separate buttons
6:12 if you want but the group's nice because
6:14 we can control lots of things together
6:16 and what we're going to do is change
6:19 this button
6:20 each of them to be round button so our
6:26 social icons and we can change the font
6:32 awesome to be Twitter that one say
6:39 Instagram for that one and perhaps
6:45 visible for this one you can of course
6:49 use your own icon sets with with these
6:52 gods as well which is nice if you've got
6:56 your own branded icons so what would we
6:59 expect to happen now we'll would expect
7:01 these three buttons to be centered
7:03 within this group and this is own to
7:06 take up one fifth of the width of the
7:10 bar and that's exactly what happens so
7:16 we've got a nice sort of lay out there
7:20 but what happens if we want to control
7:23 the width of one of these zones a bit
7:26 more perhaps we don't want our menu
7:29 items in the middle of the bar because
7:31 we want eat more to the right but if we
7:33 write a line the bar then everything is
7:36 going to move to the right so in our
7:40 title zone we've got some growing shrink
7:42 settings and you'll see that there's one
7:46 that says fixed title area which we're
7:50 not going to use on this occasion we've
7:53 got don't grow or shrink in the bar grow
7:57 preferentially and grow with damp shrink
7:59 so if we tell it to grow crush
8:01 preferentially now this zone will take
8:06 up any spare space in the bar that it
8:09 can do so rather than everything being
8:11 stretched to its extreme this zone gets
8:13 a preferential treatment it gets a
8:17 higher priority in the giving up of the
8:22 space now
8:26 this icon zone here while we don't
8:29 really want that to grow so if we
8:32 highlight this done we can say don't
8:39 grow or shrink in the bar so this zone
8:42 now will only ever be the size needed by
8:46 these buttons and we see the buttons
8:52 tight up against the right-hand side and
8:56 I think at this point if we add the
9:01 background to the bar let's make this
9:04 background sort of off black so it looks
9:08 like a normal menu bar we'll get a
9:11 better idea of how everything's going to
9:13 look as a dark and what we're on let's
9:17 make it look more like a a menu we can
9:20 style all these buttons at once in our
9:23 button bar using the button styles if we
9:28 set them to custom you'll notice is also
9:30 you can use button horsemaster styles
9:32 and foundation swatch styles if we set
9:35 them to custom it sort of defaults to
9:37 the sort of colors that you would expect
9:39 for a dark background menu bar but you
9:42 can change everything change the text
9:44 the holder the background of each button
9:46 and the hover and when they're stacked
9:49 in a vertical menu okay so let's come
9:52 back to these social icons we've got
9:54 here if you remember they were pretty
9:58 much around together on the right-hand
10:00 sidebar and we've also got these
10:02 dividers on which look nice between our
10:04 buttons but aren't so clever between the
10:07 social icon so the first thing we'll do
10:08 in our button group let's turn off the
10:12 dividers there they go and we're going
10:18 to increase the button spacing let's say
10:20 give it 16 pixels and we can add up some
10:28 spacing around our buttons which is
10:30 looking better I think it's time we can
10:33 turn off the zone helpers fair
10:37 they don't look very nice when we're
10:38 trying to see what our bar is going to
10:40 look like and we'll go back so we've got
10:46 a reasonable looking dire now but I
10:50 don't like these buttons being so big we
10:53 need to change the color of the header
10:55 so that's right to line this bar showing
11:02 if we write a line this button bar at
11:05 the moment is stretching everything if
11:10 you remember we set this down to grow
11:11 preferentially the one on the left with
11:13 the header let's change the header to be
11:17 white for the the time being look set
11:22 the alternate theme so it shows a bit so
11:26 under normal circumstances this zone and
11:31 everything else would just flow to the
11:33 right-hand side and take up the space
11:35 but because we've got this zone set to
11:38 grow preferentially when we write a line
11:41 everything else that is Raylan will take
11:45 up all of that rhythm and suddenly our
11:48 buttons are looking better now they'd
11:52 look even better with a couple of
11:54 changes obviously let's make them look
11:56 like menu items let's say home about and
12:05 gallery
12:10 so with our button box selected again
12:13 let's preview that now that's starting
12:17 to look more like a menu because I my
12:20 father effects but one of the nice
12:21 things we can do with button bar so we
12:24 can just make these divided a little
12:27 less tour I think it just brings her or
12:32 sense of coherence across the box it
12:34 doesn't get disjointed by the year by
12:39 the full height dividers and we perhaps
12:43 need a bit more a bit more spacing at
12:45 the end of this zone well that's fine we
12:47 can just custom tab this zone and I'm
12:51 going to set the stack Cuddington or
12:53 while I think about it because we can
12:55 adjust the vertical mobile menu behavior
12:59 separately so let's add I don't know 24
13:04 pixels of adding to the left hand side
13:05 of this zone and let's let's put the
13:10 same on the right there we go that's
13:16 starting to look better now now the
13:19 icons a full height of the bar at the
13:22 moment we may or may not want to make
13:26 them smaller well we can just make out
13:29 but the smaller it's probably the
13:31 easiest way so let's make these small
13:38 obviously we could cut the door which
13:40 could make the other buttons larger
13:42 we've got a almost infinite amount of
13:46 choices okay so that's better on I like
13:49 that after that we need a bit of padding
13:52 on our last time zone as well while
13:53 we're on don't we show up that matches
13:55 as well we'll put some custom padding on
14:01 here left we'll leave that on it at 12
14:03 and I also want a gap on the left of the
14:08 image so I'm just going to add a margin
14:09 to the stack on the left let's say 16
14:13 pixel Margie that's starting to look
14:17 more like a bar that you can do it
14:20 and at the moment it's not going to do
14:25 anything we haven't told it to what
14:28 we're going to do a mobile but you can
14:30 see several unique features of the zones
14:33 it doesn't wrap all the menu content to
14:37 a new line and you lose it in your page
14:39 you'll see that it tries it's best to
14:42 fit everything in so when the header my
14:45 website wraps on to two lines the rest
14:49 of the bar behaves itself and wraps on
14:54 to two lines as well now obviously get
14:56 to a point where there isn't enough
14:59 space and in the case of these flexible
15:02 zones the content will just disappear
15:04 now this is the point where we need to
15:05 set our break point so that doesn't
15:07 happen for a mobile menu but in a lot of
15:11 ways expected because with traditional
15:13 menu bars at this point where it starts
15:16 to wrap all this stuff would end up on
15:19 the white background with your page and
15:21 your white text would disappear and it's
15:25 something that people see a lot let's go
15:29 back to edit mode now we might want set
15:34 of some social icons here let's have a
15:38 little experiment let's get rid of to
15:40 the social icons and just demonstrate
15:44 another thing we can use zones for we've
15:47 got all these buttons here starred in
15:50 one way and obviously that styling you
15:52 don't have to apply the style for the
15:54 whole bar but because this is isolated
15:57 in its own group let's put this back to
15:59 a normal button we can modify this
16:04 styling separately now any button can be
16:07 custom style at the moment it's going to
16:11 get the same style as everything else in
16:13 the bar so let's get this button + style
16:18 and set up to custom so now we've got a
16:20 blue button and
16:25 we'll say maker a guy now but Princeton
16:31 this is another thing that people quite
16:34 often like to do and we've got the
16:36 button set to small at the moment let's
16:39 set it to two tiny see what we've got
16:42 now that's great we've got a two by now
16:48 but the button is the same height as the
16:53 bar that that looks good nothing wrong
16:56 with that but you may want it
16:58 differently so down at the bottom of the
17:05 button tough stack we've got settings
17:07 that are only ever used when they're in
17:09 the bar and one of the easies don't
17:11 equalize hiking bar so if we check that
17:15 this button now you're going to behave
17:18 like a button anywhere else on the page
17:19 it will stay size as you've said it
17:22 sethi to so we've got our contained by
17:26 now button it hasn't been equalized in
17:29 height to match these buttons with their
17:31 hover areas and you see how high they
17:33 are and we've got a rather respectable
17:36 little bath with a Buy Now button there
17:38 I think that image probably would do
17:42 with being a bit smaller but let's not
17:45 worry about that now so we've got our
17:50 desktop bar setup and the stacking we've
17:56 got stuck below break point now that
17:58 important thing to remember here is this
18:00 button bar break point can be used by
18:03 all the menu elements of the stack that
18:06 toggle menu and the buttons itself as a
18:11 single break point where everything will
18:14 happen you can set custom ones elsewhere
18:16 but it's quite nice to set this as a
18:21 single point of contact if you like
18:25 so at 640 pixels that's going to go now
18:29 we're going to need to change that we
18:30 know that because it was starting to run
18:32 out of space coldly yet yeah well I may
18:37 not want I may not want that you see
18:39 that's where it's wrapping and I may not
18:41 want it to go even that far say I want
18:44 to keep it on the same line well 70
18:47 creates a a good long because that's
18:49 round about the size of a tablet so so
18:53 if we set our great point to 768 just
18:57 from that little pest then that's better
19:04 so now we've got quite nice nice
19:06 behavior and then you see the the binary
19:12 button has got full width and it's made
19:15 the bottom of the menu person 1 i'm not
19:18 keen on that look so let's change that
19:23 let's sort out the width before we put
19:27 the space at the bottom and if we look
19:30 in the button + to stack settings down
19:33 the bottom we've got a second that says
19:35 don't grow in bar now if we enable that
19:38 it will stop this button automatically
19:41 filling it's available space which is
19:44 why it was going forward now normally in
19:47 a bar we want them to fill the available
19:49 space so that these three buttons will
19:51 stretch to fit the space between the two
19:54 zones I've had before but just by that
19:57 simple setting within our preview again
20:00 and we've got a butter so we've got two
20:06 choices in order to get some space below
20:09 this button and our mobile menu easy
20:13 thing we can do is add some cutting to
20:15 the bottom so that's at 12 pixels of
20:19 padding to the bottom of the zone when
20:21 it's stacked and there we go we've got a
20:23 knife space on our mobile menu
20:28 now we're going to just jump back to
20:31 that idea we had before more than one
20:34 button in this zone so let's let's add
20:38 another button and let's put this to a
20:42 custom style as well so it doesn't get
20:45 out and we'll make this one size tiny as
20:52 well so much but let's perhaps change
20:55 the color of this one there's a bit
20:58 garish and we'll set the automatic over
21:06 color so we don't need to set this whole
21:07 color it will just holler a slightly
21:09 darker than that green and we might say
21:15 demo on this book so let's have a look
21:19 at what we've got again now now we've
21:22 got another full week button underneath
21:25 our Buy Now button which is not really
21:28 what we want so we don't want that to be
21:32 underneath we want it to be alongside
21:35 our of the book and we can do this in
21:38 various ways we could say down growing
21:45 bar so this will not grow to be the
21:48 width of its group and the width in the
21:51 consequently the width of the bar and
21:54 then we immediately get a little button
21:57 group as you'd expect a group to look
21:59 then you notice we've not got our
22:01 spacing there on desktop we've got our
22:04 business pacing we need to tell it not
22:08 to equalize as well like we did with the
22:09 first one there we go and we've got our
22:14 business stationery store the spacing is
22:16 automatically removed when we get below
22:21 the break point and we've told it not to
22:25 grow so there's a way around that if you
22:27 want to display so I think that looks
22:28 quite nice myself but let's go to our
22:32 bar settings group settings sorry and
22:36 let's tell this one not to wrap now this
22:39 is a useful
22:40 a useful thing to do anyway because if
22:44 we return to our social icons that we
22:46 have before you often want you three
22:48 social icons in a line you don't want
22:50 them to stack as if you put if you put
22:52 them in a zone in top bar you'll get a
22:55 stack of three social icons which
22:57 doesn't look too nice so now we've told
22:59 this not to stack so this bottom bit
23:02 here is our group we get that gallery
23:05 and the group is spacing its buttons
23:08 just the same as if it was on desktop so
23:12 we've now pretty much hit each I think
23:15 we've got a nice menu on desktop we've
23:18 got a nice menu on mobile except it's
23:21 not a mobile menu we can sort that
23:25 though we're going to land a toggle and
23:30 we've got one little last thing to do
23:33 with this zone but I'll show you that in
23:35 a second so let's make I'm going to make
23:40 this the background of our menu bar on
23:42 mobile a different color just so that
23:45 you can see what's what let's make this
23:49 a great blue color just for now and you
23:57 probably have at least this black in
23:59 reality but I just want to see the
24:01 difference so in a toggle menu by
24:07 default we get a toggle switch stack or
24:09 she's going to be covered in a different
24:11 video let's just make that a white color
24:18 that's the label so let's we can put
24:22 menu there we go we've got a white label
24:25 sort of off-white let's make a bright
24:28 white for our toggle there we go that's
24:32 a nice way to drop colors in two worlds
24:34 just drop them straight out you don't
24:36 have to click that and click that and
24:37 then go back again just drop them
24:40 straight out of here you call the worlds
24:41 in you color picker so now we've got a
24:46 knife menu what else do we need to do
24:49 well
24:51 in essence nothing because I was just
24:54 going to work having a toggle menu with
24:58 button bar is as simple as just adding
25:00 the toggle my new stack but look nothing
25:04 appeared now this is the same problem
25:07 that people have time and time again we
25:08 drop downs we've got nothing on our page
25:11 because this is just a test page so but
25:14 I've got one in my clipboard here let's
25:17 just posts on page contents so we've
25:19 pasted in the one color foundations back
25:24 now we've got something on that page a
25:26 page doesn't end good other menu so
25:30 we've got menu that we saw before
25:32 dropping down and I said we've got one
25:35 last thing to do we don't want the title
25:37 there because just like most men use the
25:41 drop-down is what was the bar and that's
25:44 what made this a different color so you
25:45 can see that that toggle menu is
25:48 different to the dark well that's easy
25:51 to sort because we just want to hide
25:53 this zone so use don't start using
25:57 visibility stacks the zones have them
25:59 all building with much more intelligent
26:00 controls for you soon as I so we're
26:02 going to hide this now we've got various
26:06 options and they're all going to do the
26:07 same in this case but listen to a high
26:10 Glen stacked because that's going to
26:13 hide at the button bar break point and
26:15 that's the same breakpoint at the double
26:17 menus using or we could say hide when
26:19 inactive sellable menu and that's if you
26:22 using bringing in you toggle it a
26:25 different break point but we'll just say
26:28 hi when stacked you see in the toggle
26:30 menu we've got show menu up button bar
26:34 break point we could have a custom break
26:36 point if we wanted and the animation set
26:41 to slide let's just have a good look of
26:42 things we can do with that so it slides
26:46 down at the moment and now we've hidden
26:47 our top zone so that looks just like the
26:49 menu you always want to and if we want
26:53 to fade and say that slide down and
26:57 we've got more of a fading effect
27:01 and if we for instance wanted it to be a
27:06 full screen menu wouldn't really got
27:08 enough content to wat map here then we
27:12 select full screen and we've got it will
27:14 look great in Rapid River previously so
27:16 tall but this will cover the full screen
27:20 okay so one responsive menu using zones
27:26 and button bar now two things you might
27:32 be asking at this point are one is it
27:36 nearly over here and two can we contain
27:40 this menu to the width of our site
27:43 Styles max width and happily the answer
27:45 to both questions is yes and the site
27:48 max width is easy in the button bar
27:52 settings we just select that contained
27:55 width setting and it will default to a
27:59 maximum of thousand pixels which is the
28:02 foundation site with so there we go and
28:05 if you change it inside styles your max
28:08 width change it here too much you can of
28:11 course put this to something different
28:12 if you want and is actually doing a bit
28:15 more than meets the eye because if you
28:16 notice I custom padding off the zones of
28:20 God so it fills nicely and it matches
28:24 perfectly with foundation columns so
28:31 that you get this knife padding on the
28:33 left and on the right so any zone
28:37 padding that you put on will be
28:38 cancelled off the first and the last
28:40 zone or button is such that instead if
28:44 it's a button lot of them absolutely
28:46 automatically so just clicking the
28:47 contained width setting will make it
28:49 behave just as it would do if it was any
28:54 other stack of with it contained within
28:56 foundation and that's the end of the
29:00 video I hope you've enjoyed it and I
29:03 hope you can get some idea of the things
29:06 we can do with button bar strangely
29:10 enough although we've made a what you
29:13 might call a traditional menu here
29:15 it's a lot more involved than making
29:17 some more different menus such as
29:22 scented icons one thing that people ask
29:25 for all the time is a logo in the center
29:27 and menu items either side of it that is
29:31 a breeze compared to this and so
29:34 hopefully this has taught quite a few of
29:37 the ins and outs of however the stacks
29:39 all work together and it's been of some
29:42 use to you I shall see you next time
29:44 thanks for watching"}]