Transcript

00:08 in this video we're going to have a
00:10 quick look at how to use the overlap
00:13 settings in blueprint and what the
00:16 differences between the two options we
00:18 have available but to move up and pull
00:21 out so we'll start with a basic page
00:27 we've just got a blue section a green
00:31 section and then a footer they're all
00:34 done with blueprint but they could be
00:35 done with one column stacks they could
00:38 be done with sections pro anything you
00:40 like really now if we look at it as it
00:44 is now nothing's been changed they're
00:46 just everything's in its default
00:48 settings so everything will behave just
00:51 as it would normally and we get a blue
00:55 section at the top we then get I agree
00:58 one an inside that we've put our text
01:02 section with a white background and a
01:04 maximum width of 960 pixels and then at
01:08 the bottom we've got our social footer
01:11 inside the main black footer so the aim
01:16 of the game here is firstly we're going
01:18 to try and move this white section with
01:21 the text up so it bridges this gap and
01:23 the idea of these overlaps really is
01:26 just to break up the linearity of the
01:28 site a bit the horizontal lines that
01:31 just tend to divide everything up it's
01:33 nice if content can subtly overlap these
01:36 lines it gives you a bit more of a a
01:38 designed look rather than a drop team
01:41 look so we've got our contained with
01:48 blueprint here so we've just always done
01:50 this set a maximum width here of 96
01:54 pixels we're going to pull this stack up
02:00 out of the green one so that it bridges
02:05 the gap now because
02:08 inside another stack pullout seems to be
02:13 the logical thing that we would want to
02:15 do we want to pull it out of the stack
02:17 it's in and move it up and remember all
02:20 these settings are all normal
02:24 position:relative CSS settings so you're
02:28 not going to get any weird behavior with
02:30 the width of components and having to
02:32 realign things and left align a right
02:35 align not working or we're adjusting is
02:38 the top position and the margins so
02:41 everything behaves just as it would do
02:43 for a normal stack so if we go into
02:47 preview for us and then all we need to
02:50 do is just click this pull out button in
02:52 the overlap settings and the default is
02:56 just for 90 pixels and Ying's
02:59 immediately we've pulled it out by 9
03:01 pixels and you will notice that that gap
03:06 has not been added to the bottom but
03:09 this is moved up without affecting the
03:11 bottom area now if we turn that off
03:13 again then it moves down and we've got
03:20 our normal padding at the bottom so if
03:25 you see that the difference that when we
03:28 turn it on this has moved up but its
03:31 original position was 90 pixels down so
03:35 that is still taking up the space in the
03:38 green area as it was before
03:41 now if we change it up to move up you
03:47 will see that we've now still got
03:51 original space at the bottom and that's
03:54 the key difference move up takes its
03:58 entire contents and moves them up pull
04:02 out we'll just move it relative to where
04:07 it was before visually but its original
04:10 position will still take up the space
04:13 that it did before and you notice in all
04:16 these cases obviously we've put some
04:17 padding on the blue area both just to
04:21 make sure we've got some rhythm
04:22 which into so you may be wondering what
04:25 the difference is between these two
04:27 settings well if we have a look down at
04:30 the footer area which is at the bottom
04:33 of our page let's get a selection on to
04:39 this so at the moment our footer social
04:43 our orange social footer is stuck inside
04:47 as as you would expect that's where to
04:49 put it
04:50 now if we do pull out then it's pulled
04:54 it out you can see very clearly there
04:55 Harry to move it hasn't affected
04:57 anything around its above it
04:59 it's just pulled it out now if we were
05:02 to do move up it doesn't work what it's
05:05 done it's moved everything up it's moved
05:09 itself up within the black background so
05:14 it's pulled the top of the black
05:16 background it has actually moved and we
05:17 can see that it's moved because we've
05:19 now got the white space at the bottom of
05:21 our page and so if we make this move
05:24 bigger you will see a jump even further
05:27 up and we get an even bigger space so
05:30 it's taken the whole of the footer with
05:33 it and just to be clear we selected our
05:38 orange blueprint which is just limited
05:42 with left aligned
05:43 we haven't selected the footer the black
05:47 one which is where the the black
05:50 background is but nevertheless it
05:54 appears that we've pulled the whole
05:55 thing up or what we've actually done is
05:59 made more space above it because I
06:01 haven't pulled it out we've moved it up
06:02 and it expanded the space at the top of
06:08 the black area to push it up and we've
06:10 ended up with that equal gap at the
06:12 bottom which is clearly what we don't
06:14 want so the first thing to note is that
06:17 if you've got stacks that are inside of
06:21 the stacks and you want to pull them out
06:23 make sure you use the pull out setting
06:25 if you suddenly see unwanted space at
06:28 the bottom of the page it's because
06:31 you've used move up when it's inside
06:34 another
06:35 so if we use pull out now there you go
06:38 we've pulled it completely out of this
06:40 stack we haven't got a pair space at the
06:42 bottom of page there's nothing there and
06:44 it pulled out a long way we can put that
06:48 back the 113 the other two controls are
06:55 just responsive controls so our sizes
06:59 change of things around it it's nice to
07:01 be able to alter the overlaps for
07:04 different sizes so now we're probably
07:07 looking at the large with this screen
07:08 size so if we make this 130 again then
07:13 you can change the overlap just as per
07:15 the large and medium breakpoints we've
07:18 got set here once you've got these
07:20 defined the normal overlap will be below
07:23 the medium medium overlap will be
07:27 applied above the medium breakpoint you
07:29 set and below the large and then
07:32 obviously the large is just above the
07:34 large breakpoint so I just want to
07:40 mention a couple of things that you need
07:43 to know when using pull out or move up
07:46 with sections so here we've got the same
07:50 sort of like blue section a green
07:52 section we've just reclose the
07:53 blueprints for sections post axe and
07:55 here's our blueprint that we want to
07:59 pull out so we've got it set to pull out
08:01 sections are all at their default
08:03 settings nothing's being changed and we
08:07 see it's getting cut off now this you
08:11 won't see in foundation or foundry or
08:16 themes that automatically allow
08:18 overflows this is what you will see in
08:22 other normal themes where overflows are
08:26 not allowed so I'll just demonstrate
08:29 that if I just paste it aside Styles
08:32 back onto the page because we're in
08:34 foundation here you will see immediately
08:36 the overflows allowed so you won't see
08:40 that problem if you're using a framework
08:42 theme get rid of site style
08:46 all sections can sort that out for you
08:49 anyway if you're using a normal frame if
08:52 you just go down to the bottom and you
08:54 change the overflow the very bottom
08:56 setting to visible will force it to be
08:59 visible and you will get you pull out
09:02 working again and you'll see the over
09:04 area now the other thing that can happen
09:09 with sections is when we start changing
09:12 our height from a default normal height
09:14 let's go to a fixed side responsive now
09:17 we've made the fixed height now 30
09:23 pixels high and we've got this new
09:28 setting allow pull out of blueprint if I
09:30 turn that off you'll see the doctors
09:34 again hidden the overflow now same thing
09:38 with proportional Heights in certain
09:40 circumstances we've got a 30% browser
09:43 height here it's working without the
09:45 allow pull out of blue blueprint if we'd
09:48 applied some animations or other things
09:50 with child stacks it may well have
09:53 hidden that overflow in which case if it
09: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"}]