0:00 [Music]
0:08 in this video we're going to have a
0:10 quick look at how to use the overlap
0:13 settings in blueprint and what the
0:16 differences between the two options we
0:18 have available but to move up and pull
0:21 out so we'll start with a basic page
0:27 we've just got a blue section a green
0:31 section and then a footer they're all
0:34 done with blueprint but they could be
0:35 done with one column stacks they could
0:38 be done with sections pro anything you
0:40 like really now if we look at it as it
0:44 is now nothing's been changed they're
0:46 just everything's in its default
0:48 settings so everything will behave just
0:51 as it would normally and we get a blue
0:55 section at the top we then get I agree
0:58 one an inside that we've put our text
1:02 section with a white background and a
1:04 maximum width of 960 pixels and then at
1:08 the bottom we've got our social footer
1:11 inside the main black footer so the aim
1:16 of the game here is firstly we're going
1:18 to try and move this white section with
1:21 the text up so it bridges this gap and
1:23 the idea of these overlaps really is
1:26 just to break up the linearity of the
1:28 site a bit the horizontal lines that
1:31 just tend to divide everything up it's
1:33 nice if content can subtly overlap these
1:36 lines it gives you a bit more of a a
1:38 designed look rather than a drop team
1:41 look so we've got our contained with
1:48 blueprint here so we've just always done
1:50 this set a maximum width here of 960
1:54 pixels we're going to pull this stack up
2:00 out of the green one so that it bridges
2:05 the gap now because
2:08 inside another stack pullout seems to be
2:13 the logical thing that we would want to
2:15 do we want to pull it out of the stack
2:17 it's in and move it up and remember all
2:20 these settings are all normal
2:24 position:relative CSS settings so you're
2:28 not going to get any weird behavior with
2:30 the width of components and having to
2:32 realign things and left align a right
2:35 align not working or we're adjusting is
2:38 the top position and the margins so
2:41 everything behaves just as it would do
2:43 for a normal stack so if we go into
2:47 preview for us and then all we need to
2:50 do is just click this pull out button in
2:52 the overlap settings and the default is
2:56 just for 90 pixels and Ying's
2:59 immediately we've pulled it out by 90
3:01 pixels and you will notice that that gap
3:06 has not been added to the bottom but
3:09 this is moved up without affecting the
3:11 bottom area now if we turn that off
3:13 again then it moves down and we've got
3:20 our normal padding at the bottom so if
3:25 you see that the difference that when we
3:28 turn it on this has moved up but its
3:31 original position was 90 pixels down so
3:35 that is still taking up the space in the
3:38 green area as it was before
3:41 now if we change it up to move up you
3:47 will see that we've now still got
3:51 original space at the bottom and that's
3:54 the key difference move up takes its
3:58 entire contents and moves them up pull
4:02 out we'll just move it relative to where
4:07 it was before visually but its original
4:10 position will still take up the space
4:13 that it did before and you notice in all
4:16 these cases obviously we've put some
4:17 padding on the blue area both just to
4:21 make sure we've got some rhythm
4:22 which into so you may be wondering what
4:25 the difference is between these two
4:27 settings well if we have a look down at
4:30 the footer area which is at the bottom
4:33 of our page let's get a selection on to
4:39 this so at the moment our footer social
4:43 our orange social footer is stuck inside
4:47 as as you would expect that's where to
4:49 put it
4:50 now if we do pull out then it's pulled
4:54 it out you can see very clearly there
4:55 Harry to move it hasn't affected
4:57 anything around its above it
4:59 it's just pulled it out now if we were
5:02 to do move up it doesn't work what it's
5:05 done it's moved everything up it's moved
5:09 itself up within the black background so
5:14 it's pulled the top of the black
5:16 background it has actually moved and we
5:17 can see that it's moved because we've
5:19 now got the white space at the bottom of
5:21 our page and so if we make this move
5:24 bigger you will see a jump even further
5:27 up and we get an even bigger space so
5:30 it's taken the whole of the footer with
5:33 it and just to be clear we selected our
5:38 orange blueprint which is just limited
5:42 with left aligned
5:43 we haven't selected the footer the black
5:47 one which is where the the black
5:50 background is but nevertheless it
5:54 appears that we've pulled the whole
5:55 thing up or what we've actually done is
5:59 made more space above it because I
6:01 haven't pulled it out we've moved it up
6:02 and it expanded the space at the top of
6:08 the black area to push it up and we've
6:10 ended up with that equal gap at the
6:12 bottom which is clearly what we don't
6:14 want so the first thing to note is that
6:17 if you've got stacks that are inside of
6:21 the stacks and you want to pull them out
6:23 make sure you use the pull out setting
6:25 if you suddenly see unwanted space at
6:28 the bottom of the page it's because
6:31 you've used move up when it's inside
6:34 another
6:35 so if we use pull out now there you go
6:38 we've pulled it completely out of this
6:40 stack we haven't got a pair space at the
6:42 bottom of page there's nothing there and
6:44 it pulled out a long way we can put that
6:48 back the 113 the other two controls are
6:55 just responsive controls so our sizes
6:59 change of things around it it's nice to
7:01 be able to alter the overlaps for
7:04 different sizes so now we're probably
7:07 looking at the large with this screen
7:08 size so if we make this 130 again then
7:13 you can change the overlap just as per
7:15 the large and medium breakpoints we've
7:18 got set here once you've got these
7:20 defined the normal overlap will be below
7:23 the medium medium overlap will be
7:27 applied above the medium breakpoint you
7:29 set and below the large and then
7:32 obviously the large is just above the
7:34 large breakpoint so I just want to
7:40 mention a couple of things that you need
7:43 to know when using pull out or move up
7:46 with sections so here we've got the same
7:50 sort of like blue section a green
7:52 section we've just reclose the
7:53 blueprints for sections post axe and
7:55 here's our blueprint that we want to
7:59 pull out so we've got it set to pull out
8:01 sections are all at their default
8:03 settings nothing's being changed and we
8:07 see it's getting cut off now this you
8:11 won't see in foundation or foundry or
8:16 themes that automatically allow
8:18 overflows this is what you will see in
8:22 other normal themes where overflows are
8:26 not allowed so I'll just demonstrate
8:29 that if I just paste it aside Styles
8:32 back onto the page because we're in
8:34 foundation here you will see immediately
8:36 the overflows allowed so you won't see
8:40 that problem if you're using a framework
8:42 theme get rid of site style
8:46 all sections can sort that out for you
8:49 anyway if you're using a normal frame if
8:52 you just go down to the bottom and you
8:54 change the overflow the very bottom
8:56 setting to visible will force it to be
8:59 visible and you will get you pull out
9:02 working again and you'll see the over
9:04 area now the other thing that can happen
9:09 with sections is when we start changing
9:12 our height from a default normal height
9:14 let's go to a fixed side responsive now
9:17 we've made the fixed height now 300
9:23 pixels high and we've got this new
9:28 setting allow pull out of blueprint if I
9:30 turn that off you'll see the doctors
9:34 again hidden the overflow now same thing
9:38 with proportional Heights in certain
9:40 circumstances we've got a 30% browser
9:43 height here it's working without the
9:45 allow pull out of blue blueprint if we'd
9:48 applied some animations or other things
9:50 with child stacks it may well have
9:53 hidden that overflow in which case if it
9:56 does just check that setting now just
10:00 bear in mind that sections intelligently
10:03 hide overflows for things that need them
10:05 hidden so when you add a child stack
10:07 with a Ken Burns animation and certain
10:10 other effects it will hide the overflow
10:12 for a good reason because it needs to
10:14 clicking this button will override that
10:18 come what may so you generally won't
10:21 need it but it's pretty obvious if you
10:23 do it will just allow it to pull out if
10:27 doing so break something else because
10:30 you've allowed an overflow on an image
10:32 that shouldn't be overflowing then
10:35 obviously do it a different way you try
10:37 to put too many different things in one
10:39 section so that's the only real
10:43 difference other than that in default
10:44 state if it will just behave just like
10:46 these ones will be using blueprint so
10:51 we'll have a look now the examples from
10:55 the home
10:58 demo site and the blueprint one page and
11:02 just see how it goes first one is
11:06 pulling up over an image at the top so
11:08 we've got our image top of the page just
11:13 again just done in the blueprint for the
11:15 background image using the we shared
11:18 Charles stack from pro styles and we
11:20 want to pull up this orange blue print
11:24 box over the image so you see we've got
11:29 it inside another blue print in just in
11:33 order to give us our site max width and
11:36 a width for small screen so we've got a
11:41 96 96 % width and a max width of 14 46
11:45 but this is this is where the business
11:47 is happening now we are inside another
11:52 blue print here but we're not trying to
11:53 pull it out of a colored background so
11:55 it doesn't matter if we move its parents
11:58 up and in this case we do want to use
12:01 move up for that same reason because
12:03 this can will want the space below to be
12:07 moved along with this stack so just like
12:11 at the bottom where it was adding this
12:12 base and we didn't want it here we want
12:15 the page flow to remain as it was before
12:18 so we'll preview that page and you can
12:21 see now we've got this set to move up so
12:23 it's just literally moved up by 136
12:26 pixels and it's now over the bottom of
12:29 the image if we wanted to change this to
12:34 pull out if you watch the position of
12:36 this just get it right set up then when
12:41 we change it to pull out you see that
12:46 jump down we've now got the space here
12:50 equivalent to the size of the stack
12:53 removed so if you've got extra spacing
12:56 you think where's the extra space coming
12:58 from it because you've used the pull out
13:00 setting when it's not inside a
13:05 background area going put it back to
13:08 move up
13:10 and everything now is spaced as per the
13:14 settings that we put in the stacks
13:16 similarly here we've got just two
13:19 blueprints one with the text in it and
13:22 the gray background board around it and
13:24 we've just pulled that up behind the the
13:31 our English title and again that will be
13:34 using the move up so I think always
13:37 think you're pulling content that's
13:39 below upwards on the page so this one is
13:43 set to move up as well by 55 pixels and
13:46 it just puts it halfway under that one
13:49 and if we go down further we can have a
13:52 quick look at how the the corner padding
13:55 from work now this only works for text
13:58 this just puts an empty floated
14:02 container in in the blueprint so the
14:06 text will wrap around this just like if
14:08 you had a floating image in a in a text
14:11 stack or in a paragraph the text will
14:14 wrap around this so again we'll go back
14:18 to our preview and we'll just see what
14:20 we're trying to do we want the text to
14:23 wrap around the floated area that's
14:28 behind here such that when it overlaps
14:30 we don't lose our text behind there and
14:32 we don't have to put any nasty columns
14:34 with things like vine and it's all nice
14:36 and responsive so we can change the size
14:39 of that that space and so the text is
14:41 always is always nicely away from our
14:45 orange box and to set that up is very
14:51 simple once you've got your overlap done
14:55 let's just turn off the corner spacer so
14:58 we'll just turn that off there so when
15:02 you set it up you've got to move up and
15:05 the overlaps gone and then you just need
15:08 to work out how much overlap you need to
15:10 space so you can see how the text gone
15:12 behind it so we want to put an imaginary
15:15 box in floated in the text area the size
15:19 of the overlap with the orange part
15:22 and it's a bit of trial and error that
15:25 you can guess pretty much so you can you
15:27 can change the small medium and large
15:31 with again as filler the breakpoints at
15:34 the top you can also change the height
15:37 know the widths you can do in
15:39 percentages the height for various
15:41 regions has to be an absolute unit so
15:43 you can choose pixels browser width or
15:45 browser height browser width is quite
15:47 useful if you're trying to scale stuff
15:51 proportionally to the size of the
15:52 browser make it responsive in this case
15:54 we're just using pixels so I guess that
15:58 for medium screens this overlap that we
16:02 just saw was about 26% and for large
16:05 screens it's about the same because the
16:07 the text doesn't change that much we
16:09 could probably fine tune the medium one
16:11 a bit a bit more we've also got a
16:13 control for where it where it is top
16:15 left or top right so if we were
16:18 overlapping from the other side we'd
16:20 just do that
16:21 bear in mind with floated spacing and
16:26 text that wraps around it it can only be
16:29 done at the top so you can't float at
16:31 the bottom and wrap the text around it
16:33 either side that's just the way that
16:35 floats work so you've got to think about
16:37 how you you do your layout to make sure
16:40 the overlapped areas at the top if you
16:41 want to use this feature and we can turn
16:45 it off in edit mode if we don't like
16:47 that empty box there so you'll notice
16:51 also that we've got no space or width
16:54 for small screens and that's because for
16:59 small screens we decided that we didn't
17:01 want any overlap so in the overlap
17:04 settings we set it to zero so we get our
17:09 normal experience one was below the
17:12 other one no overlap now some of these
17:15 are the ones we've left the overlap on
17:16 seeing see this one the black one over
17:19 the image will let the overlap on for
17:21 mobile just to show the flexibility and
17:23 the same with the one we looked at
17:25 before with the title so it's entirely
17:28 up to you you can turn the overlaps on
17:30 and off for each of the three screen
17:32 sizes
17:33 I'll just come down to the the final one
17:36 at the bottom here and we've overlapped
17:41 this caption type content over the image
17:45 here there is one of the control we have
17:49 available to us will come down to this
17:51 caption will see all we've done is set
17:55 the move up control again and we're
17:58 going to overlap by one hundred and
18:00 thirty two hundred and thirty four
18:02 medium and two hundred thirty four large
18:04 that's just because we don't want the
18:06 overlap so much when we're on mobile and
18:10 the image itself is smaller so let's
18:14 just have a look how that behaves and
18:18 you see we have overlay controls here so
18:21 it defaults to be in the front if you
18:22 wanted you could put it at the back so
18:26 now it's behind our image and obviously
18:28 I've made the image transparent so you
18:29 can see it and there's a custom control
18:32 which allows you to change the z-index
18:35 to a custom value you should never
18:38 really need to use that but it's there
18:39 if you do now one final thing if we
18:48 change this to pull out instead of move
18:51 up so we'll use the wrong setting you'll
18:55 now see we've got our gaap back again
18:57 there so it's like where do this gap
18:58 come from it because we've used pull out
19:00 on machine Tintin
19:07 and then we are back to everything we
19:10 just did correct margins and padding
19:12 around it so I hope that's been useful
19:15 and it really is very simple to use
19:19 these controls it's just what you see
19:20 here in the overlap settings move things
19:24 up and if you don't get the results
19:28 you're expecting just come back to this
19:31 video and decide whether you should be
19:33 using removal port pull out because it's
19:36 a 99% at the time you should be using
19:38 move up
19:39 so that's the first button thanks for
19:41 watching and I'll see you next time"}]