0:00 [Music]
0:07 in this video we're going to take a look
0:09 at the blueprint sidebar stack and the
0:12 things that we can do with it
0:14 let's start by dropping a sidebar onto
0:17 the page and you can see that
0:19 essentially the sidebar is a two column
0:23 stack and in fact you can use sidebar is
0:25 a very powerful two column as well so
0:29 we'll start by looking at its basic two
0:33 column type features and then we'll look
0:35 at the extra things that it can do to
0:37 make sort of side menus and more
0:39 traditional sidebars as people may think
0:41 of them so as we look down the settings
0:45 and we consider the information at the
0:49 top and we can add backgrounds to our
0:52 side by using the pro stiles charles
0:54 stacks just like a lot of neither stacks
0:56 and it says we use the background child
0:59 for the main content area and the
1:03 overlay for the sidebar area or the
1:06 aside so you can see if we just add a
1:08 background and an overlay we get our
1:11 colors that way and of course this means
1:13 that we can use gradients images CMS
1:17 images and everything that we can use in
1:21 the other stacks that support the pro
1:24 styles child stacks so that out of the
1:27 way let's have a look at the actual
1:28 column layout settings so the first
1:32 thing you see is that we have three
1:34 break points available medium/large and
1:36 XL you don't have to use all the
1:38 settings for these we can define large
1:40 and extra-large sizing if we need them
1:43 the only one that is mandatory is our
1:48 small setting which is when it stacks
1:50 now if you don't want it to stack you
1:53 can just change the medium break point
1:54 to zero of course just like any any
1:57 other break point control system the
2:01 basic functionality of sidebar in in
2:04 terms of it being a column is that we
2:07 can define the width of one of the side
2:12 and the other column will take up
2:15 whatever space is needed so if we change
2:17 this width to 60 percent which is
2:20 defaults the percentages then it
2:22 obviously behaves as you'd expect let's
2:24 just set it to 50/50 for now so it's
2:27 like two equal columns in addition to
2:31 normal column behavior though we don't
2:33 have to have it as percent we could make
2:35 it a fixed width and if you're making a
2:37 menu of the side of a vertical menu of
2:39 the side of the page you may well want
2:41 this as a fixed width we can of course
2:44 define different sizes for different
2:46 widths so we can have a 30% for large
2:50 screens and we could define an
2:51 extra-large if we want it as well and as
2:55 you see it clearly resizes between these
2:58 different sizes so it's very flexible as
3:01 a column so let's get on and put some
3:04 content in here I've got a head of stack
3:08 here and let's put another one in the
3:11 aside just so that when it stacks we can
3:14 see which which columns which let's put
3:19 a small paragraph in there and let's put
3:23 a couple of bigger paragraphs into the
3:28 main content area just to placate those
3:33 if we now preview that we've got main
3:38 content and a 30% site content and you
3:42 can see by default the side content goes
3:46 on top that because it's a sidebar the
3:49 bit opposite to columns but we can
3:53 control that here if we wanted to on the
3:54 bottom then it goes on the bottom so via
3:59 sides at the bottom now if we want to
4:01 hide the second column content
4:03 completely for small screens we can so
4:07 we can go back appears again when we get
4:09 above our medium breakpoint
4:12 let's just turn that back on for now and
4:14 we can say whether we want the side
4:19 content on the left or on the right so
4:22 that's all very obvious very simple
4:25 we've already looked at the width and
4:28 you may want to divider and gutters be
4:33 good to control is again very easily
4:34 easy to operate
4:36 we just increase the gutter and we can
4:40 have a divider if we want as well so all
4:42 very very simple you can even have
4:44 dotted and dash dividers if you really
4:46 want so that's all as you would expect
4:54 we can do a few other nice things with
4:56 it let's put some backgrounds on this
4:59 again just so that we can see the extent
5:01 of the columns just select our sidebar
5:05 and go back to preview now you'll notice
5:08 by default always these columns are
5:12 equal Heights so your backgrounds will
5:16 always be equal and this is just just
5:20 pure CSS so there's no messing around
5:22 and it's very easy to control you'll
5:26 notice that the gutter pushes the
5:29 background so if you want the
5:31 backgrounds to meet just turn the gutter
5:34 off you can see the drive we can just
5:38 see the divide still there let's turn
5:39 the divider off for now just so that
5:41 it's going to change the color and we've
5:44 now got to be from two different
5:47 backgrounds so when it stacks obviously
5:51 you can see the backgrounds as it stacks
5:54 now we do have stacked cluster setting
5:57 as well so we can actually put a space
6:00 between them when it stacks if we want
6:04 this is quite useful if instead of
6:08 backgrounds you have borders because we
6:10 can put borders around each column get
6:13 rid of the background and if we go down
6:16 to the styling area in the settings
6:22 we've got we can put some padding we can
6:24 put a board around our aside let's just
6:27 make that sort of three pixels and give
6:30 it 10 pixels rounding we can then do the
6:33 same for our content area if we want and
6:38 this is when we really want gutters
6:40 again now because you see doesn't look
6:43 too attractive when they they doing like
6:45 that so let's just add a bit of gutter
6:47 now they you've gotta at the moment is
6:51 in pixels but we can have it in
6:53 percenter too if you want it to be a bit
6:55 more fluid and this is where you'll see
6:58 that the stacking gutter ease is useful
7:00 because it stops the borders buttoned up
7:05 against each other when exact if we turn
7:07 the stack gutter
7:08 we get that sort of effect so very very
7:12 simple controls and let's just make
7:16 these guests top size again we can of
7:20 course have backgrounds as well as
7:21 borders obviously the background will
7:25 take on the the border radius shape and
7:29 we can mix and match whichever we want
7:34 so if you remember we said that these
7:38 things are equal high automatically that
7:42 gives us the option to do some useful
7:43 things with the content in that in each
7:46 of the content in the side areas if you
7:49 look at the settings for each of them we
7:52 have a content as flex column setting
7:55 and a sidebar as flex column setting if
7:57 we just enable that then we get a
8:00 vertical align control so we can make
8:02 the side content centered or we can make
8:06 it align to the bottom with respect to
8:09 the other one so just say that obviously
8:13 looks just as you expect notice that the
8:16 the borders will still be full height
8:19 you probably wouldn't be using the
8:21 borders in this situation let's just
8:24 turn the boarded off just to make it
8:25 look a bit nicer and we'll leave that
8:29 background on just for now but we'll
8:32 turn the border off the content area as
8:35 well so I'm around now
8:41 only can this side be aligned that the
8:45 content area can be aligned as well just
8:47 the same control so if we say we want
8:50 the content centers then that will send
8:52 to the content now bear in mind any
8:54 alignment just like anything else is
8:56 going to be aligned when this space to
8:59 align into so that's not going to make
9:01 any differences at all because the stack
9:03 is getting the height of the longest
9:05 content if we were to move some of these
9:10 pieces of text over to the side then you
9:15 see immediately now the content area is
9:17 centered and it's going to look just the
9:21 same in preview from when it stacks the
9:24 centering is automatically canceled and
9:27 everything behaves just like normal now
9:32 we'll put these back for a second
9:35 one thing that will definitely come up
9:38 particularly with making sidebars is
9:41 that you don't want all the content
9:43 centered so if we turn the sidebar area
9:50 to align top and that's the content area
9:55 or we'll leave that top as well turn the
9:57 sidebar area to align top and it must be
10:01 set to sidebar selects column and it
10:04 must be set to align top to do this but
10:06 then imagine we had a button and let's
10:13 just get rid of that warning message so
10:17 we'll just quickly send to this button
10:20 and this may be a Buy Now button or find
10:25 out more whatever but we want this
10:27 instead of it being with the rest of
10:29 this content we wanted to bind at the
10:31 bottom which historically is an awkward
10:35 thing to do but not anymore because we
10:39 just drop it into a blueprint and then
10:42 right at the bottom in the advanced
10:43 settings for blueprint all you need to
10:45 do is click Auto vertical align in flex
10:48 columns sidebar thanks so now when we
10:51 look the buttons at the bottom
10:54 got its bottom margin on it so if we
10:58 just take the bottom margin off the
10:59 button then it will be right at the very
11:02 bottom like so how easy is that what
11:08 about if we want something in the middle
11:10 well there's only ever one setting for
11:13 this and it just depends how you build
11:14 it so if we put another one in it's
11:16 pretty logical and we now turn this one
11:19 on towards a vertical line so we would
11:23 assume that this one would be centered
11:24 and this one would be bottom when
11:25 they're both set to vertical align
11:27 automatically and there you go
11:29 they are if you want something at the
11:31 top say we want this headed to be at the
11:33 top let's just pull it out of that
11:34 blueprint so now we've got a little
11:38 duplicated it so now we've got a
11:40 blueprint set to water align another one
11:42 set to water align a header at the top
11:45 and then we've got top content center
11:48 content and bottom content easy as you
11:52 like so hopefully all the difficulties
11:56 of of alignment of things in that
12:00 respect that will go away and exactly
12:02 the same works in the content area if
12:04 that if that was taller so that's a very
12:07 very easy way to do it and it just
12:09 depends on how many you've got if you
12:12 put one in it will go to the bottom if
12:14 you put two in you'll get the middle of
12:16 them the bottom so sort of works really
12:19 expect now what else can we do with
12:24 columns if you wanted to nest blueprints
12:30 sidebars you can do so if we put another
12:33 sidebar in here and we set it to 50%
12:36 width then we've now got if we if we
12:42 just make sure about instead of being
12:45 that this is the first one again now so
12:47 let's make that 33.3 so that's the third
12:51 and these two are going to take a path
12:56 of the 2/3 so we'll get three equal
12:58 columns that way
13:01 you probably wouldn't usually want to do
13:04 this because it's a bit of a faff
13:07 compared to using a three-column stack
13:09 that there we have three columns one
13:12 thing that is nice though is that you
13:14 can wrap at different points so we could
13:17 say we want this sidebar to wrap that
13:21 let's just increase the medium
13:23 breakpoint to say 860 pixels and so this
13:28 this content area now is going to go
13:30 above at 860 pixels just reduce the
13:35 amount of it bit this one you're going
13:38 to still wrap up at 640 so now at 860
13:44 this one goes on top and we're just left
13:47 to that 50/50 split on the second one
13:50 and then at 640 that one wraps so you
13:55 can do some quite useful things by
13:58 nesting them the final thing we're going
14:02 to talk about is building a sidebar
14:06 using the full height setting so this is
14:08 more like a a menu sidebar type
14:10 application and for that we're just
14:12 going to switch to the page from the
14:13 demo project and what we've got here is
14:19 we've got a sidebar and there's quite a
14:23 lot of content in it so let's just
14:25 collapse the content so we can see what
14:28 we've got the side area is the bit shown
14:33 in blue in black so and the main content
14:36 is everything else on the page so we're
14:40 going to use this to wrap the entire
14:43 page and to do that we're going to set
14:47 down at the bottom is our height and you
14:49 can see if I turn it off and back on
14:51 again we've just got a setting that says
14:54 full browser we're not stacked so I'm
14:58 going to turn the scroll bars back on
15:00 intimate for a minute so all this gives
15:03 us is just like we saw before it gives
15:09 us a sidebar which is here which we've
15:12 got on the left and then it gives us our
15:14 content
15:14 riah so we've got our whole page inside
15:18 the content area and in this case I've
15:22 got it a fixed width so it starts off
15:25 that wide and then as a breakpoint
15:28 somewhere they just get slightly
15:30 narrower and the buttons get a bit
15:32 smaller and then I'll mobile it wraps me
15:37 goes to the top and he's actually turned
15:39 into a menu that's that's not the
15:41 sidebar that's button though but
15:44 anything will work in here and you can
15:47 see we've got a few nice features as
15:50 well that make it a bit more interesting
15:53 so when we hover the sidebar it recolors
15:56 the icons so they're gray and then
16:00 colored and we can slide the the texting
16:02 as well so the table could have we did
16:04 that so we'll come down to our with
16:11 settings first you can see that we've
16:13 defined a width of a hundred pixels and
16:18 then 124 larger screens and that was
16:21 just that slight changing size we saw to
16:23 accommodate the icons so pretty much
16:26 sure as we saw in the other example
16:28 we've got no glitters no no dividers
16:31 we've got a black background on our on
16:36 that sidebar on our side a side area
16:40 we've got no background on the content
16:42 area they're all at the bottom of the
16:44 stack we won't scroll all the way down
16:46 to the X that's where the child stacks
16:47 are and then all we do is hit the full
16:51 browser height now if we turn on off we
16:56 see that the sidebar has become the
17:01 height of the content area so our
17:03 sidebar scrolling which is not what we
17:05 want so that's just as when we were
17:08 using it in columns the stack behaves
17:11 like a normal stack so this 100% height
17:16 is the key can make pages that have a
17:21 fixed sidebar so all we do is we make
17:23 the sidebar stack the height of the page
17:28 and then it allows the content area to
17:30 scroll and this will happen with them
17:33 set to the default settings so that the
17:36 stacks not moving but the content area
17:38 is and if you're using chroma as a menu
17:43 in here that that will work and you can
17:46 just set it to blueprint as its parent
17:50 instead of the page so all the scrolling
17:52 behavior will still work just as it
17:54 doesn't normally the only thing you've
17:57 got to be careful of using this setting
17:59 is putting stuff above it and below it
18:03 you can do with it as you set at the
18:05 moment but obviously you're going to
18:08 have a sort of a double scroll the page
18:10 will scroll down to this area then this
18:12 pickled scroll and then it will scroll
18:13 again so it's probably not the best user
18:15 interface now the only other thing to
18:18 note is that there's a setting here that
18:21 says no scroll bars on the body element
18:24 now at the moment I've got my scroll
18:27 bars set to auto and if I just change
18:34 them in my preferences to always so now
18:40 all our apps will show a scroll bar all
18:42 the time you see the scroll bars
18:43 appeared there if you have this set
18:47 sometimes you can get a double scroll
18:50 bar which doesn't look that great now
18:53 this is scroll bars are controlled by
18:56 whatever browser you're viewing you
19:00 there's not a lot of webpages can do
19:02 about them but I have provided some
19:06 custom settings here that you can get
19:09 rid of them if you say no scroll bars on
19:11 the body element the dis setting down
19:13 here and there's a big warning read the
19:16 tooltip then you will only ever get a
19:18 single scroll bar and it's absolutely
19:21 fine to do this as long as you've not
19:23 got any content below or above this
19:25 stack this stack has the whole page in
19:27 it because what this setting does easy
19:30 stops the overflow on the on the main
19:33 part of the page on the on the body and
19:36 on the HTML element which is perfectly
19:39 valid to do
19:40 obviously nothing outside of this stack
19:43 is going to scroll so just be careful
19:45 with that setting and I've ever read the
19:47 tool tips and finally we've got our
19:51 little animations and the animations are
19:57 quite simple we have two very simple
20:02 settings in the hover for the sidebar
20:05 aside we can either slide in content or
20:09 we can add color to content and it's
20:15 deliberately kept simple for that reason
20:17 so at the moment I've got it set to
20:20 slide in anything with a CSS selector of
20:24 dot P broke which is paragraph prose
20:26 which is what these are so these are a
20:29 bit more advanced settings you've got to
20:31 know what the selector is of the thing
20:32 you try to slide in but if you put
20:35 something in a CSS box then you can
20:38 slide in anything you like if you don't
20:41 know the selector because you give it
20:42 the class name yourself the article and
20:47 we'll just apply a monochrome filter to
20:51 anything when it's not covered and at
20:53 the moment these icons are all done in a
20:57 blueprint SVG stack and I happen to know
21:00 that that has the class of blue SVG if
21:04 you didn't know that it doesn't matter
21:05 because it has a custom class setting
21:07 anyway most of my stacks have custom
21:09 class settings so if you give the static
21:12 custom class you can use it selector
21:14 here and remember these last selectors
21:17 so you will need the dot they're not
21:18 class names but that also means that you
21:21 can use IDs as well so if you wanted to
21:25 if you have a something with an ID of
21:28 finding a hash something with an idea of
21:33 my image then you would just put it with
21:37 a hash in that setting so again a bit
21:40 more advanced but a nice little feature
21:44 just to augment menus and I needed it
21:48 for something so you get it
21:50 and that really is sidebar I
21:55 suggest you look at the demo project
21:57 which is what we're looking at here this
22:01 has got lots of examples so there's a
22:03 basic sidebar here that what we were
22:05 talking about earlier there's one with
22:09 some colors showing the equal heights in
22:11 operation and then we've got a nested
22:14 one like we saw before and a bit of
22:18 nesting we've got AZ and borders so it's
22:23 nothing really out of the ordinary you
22:26 build the stack just as you would build
22:28 any column stack it's only really the
22:31 the height set to meet in the probably
22:34 the rare cases when you want to use it
22:35 to make a full page side menu on your
22:40 site okay thanks for watching and
22:42 there'll be more blueprint videos very
22:44 soon"}]