0:05 hey everybody so by now you've probably
0:08 watched the Jacke overview video and
0:10 you're overwhelmed with all the amazing
0:12 things that Jack can do right now in
0:15 that video I didn't really go over the
0:16 nitty gritty so in this particular video
0:19 we're gonna be going over all of the
0:21 Jack layout settings so all the awesome
0:25 layout things that you can do with Jack
0:26 so this is gonna be probably a long one
0:29 so without further ado let's jump on
0:30 into it really quick so here we are in
0:34 the demo file that actually ships with
0:36 Jack and you can always down download
0:38 this from our dock portal as well now
0:41 Before we jump into the advanced height
0:43 controls let's go over just some general
0:46 layout ish settings with Jack first
0:50 we'll notice that there's a note inside
0:51 Jack that instead of using the normal
0:54 default background border and layout for
0:57 the stack you should not be using those
0:59 with a jack you should use Jack's actual
1:01 controls this is because Jack has its
1:04 own way of doing things and a lot more
1:06 advanced controls than what the default
1:08 stack settings are for layout border and
1:12 background so you should just ignore all
1:14 of those now Jack also has the obvious
1:20 layout options like most of the stacks
1:23 have you know alignment center left and
1:26 right fill flexible with static width
1:30 right
1:31 all of those are options within stack so
1:36 now let's go and do what aren't in most
1:39 stacks and that starts off with the
1:41 advanced height controls and let's look
1:44 at these three examples that we have
1:46 here we have this blue box that is going
1:49 to be kept proportionally from I had a
1:52 16 point 9 16 to 9 ratio so inside Jack
1:58 I set my height to proportional and then
2:01 I set my width and height ratio to 16 by
2:03 9 that's going to keep that Jack to be
2:09 exactly 16 by 9 ratio even if you resize
2:12 the browser okay let's look at this
2:16 second example here now in this second
2:19 example I've done a couple things hey I
2:21 wanted to make a big box okay so I
2:23 created a proportional box that has a
2:26 width of one to one and I did that so
2:29 that I have a Jack inside of it that is
2:32 that gonna take a 50% height of the
2:35 parent which is our square Jack that we
2:38 created so let's look at what this looks
2:40 like in preview here we have our two
2:43 boxes we have our blue box that is going
2:47 to stay proportionally at a 16 to 9
2:50 ratio and then we have a Jack box here
2:54 that has the striped background that is
2:56 set proportional one to one so that we
2:59 always have a perfect square then there
3:02 is a Jack stack inside of that that has
3:05 set the flexible height relative to the
3:10 parent of 50% this way if I now have
3:14 item now if I were to resize the browser
3:18 down we'll notice that all of these are
3:22 going to react and stay exactly what we
3:26 need right this blue box is staying
3:28 exactly 16 to 9 our square box remains a
3:32 square and our Jack inside of it is
3:34 always 50% height of the square now I
3:39 notice I didn't really show the flexible
3:41 height options so let's look at that so
3:44 we have a flexible way we set our height
3:46 to flexible
3:47 we now have relative to what parent and
3:50 browser now we'll look at browser in a
3:53 second
3:53 but in this instance we want it to be
3:55 relative to parent and the height is
3:58 going to be 50% height now let's look at
4:02 an option when we're actually doing
4:03 relative to the browser size so on this
4:08 demo page this actually is using Jack at
4:12 a 100% hype relative to the browser this
4:17 is really easy to configure so inside
4:20 Jack you just simply set your height to
4:23 be flexible
4:24 your relative to brow
4:26 and the sizes can be 100% making changes
4:31 to be 50% or whatever percentage height
4:34 of the browser that you'd like and
4:36 what's wonderful is it's fully
4:37 responsive so it doesn't matter how high
4:40 or wide your browser is Jack is always
4:44 gonna take up 100% height and what's
4:47 great is all the content is below it so
4:50 as you just scroll down the content will
4:53 display just as you're scrolling down a
4:55 web page now this example here we have a
4:59 50% browser height so this is where I I
5:02 created a container using Jack where the
5:04 height of that container is static to be
5:07 50% height of the browser window so this
5:11 means that this area is gonna expand and
5:13 contract based on the device so on
5:17 desktops it's obviously going to be
5:18 bigger and on mobile phones it's gonna
5:20 be a lot smaller now the next layout
5:24 options with Jack have to do with
5:25 scrolling your content and with Jack you
5:28 can scroll your content both
5:29 horizontally and vertically so in this
5:34 example here for a vertical scrolling
5:36 container
5:37 well notice that I have a lot of text
5:40 content inside Jack now in this
5:43 particular instance I set Jack to have a
5:45 static height but this would also work
5:47 if you had flexible or proportional
5:49 Heights and if the content grew larger
5:52 then the actual box could hold you could
5:55 set the vertical scrolling to true so
5:58 that the actual content will scroll now
6:03 for horizontal scrolling we actually
6:06 here have the width set to fill because
6:09 it's our content that's going to be
6:10 wider so what I've done is I've set my
6:12 width to fill but you can set it to
6:14 flexible or static if you want and then
6:17 you turn on horizontal scrolling now the
6:20 trick to get your content to actual
6:23 scroll is when you add a stack into Jack
6:28 that you want horizontal scrolling to
6:29 work on you need to make sure that the
6:32 layout settings for that is not set to
6:34 fill you want to set it to either
6:37 flexible size or fixed size
6:40 and this particular instance I have all
6:43 of these images set to be exactly 180
6:46 pixels wide and if we look at the
6:51 preview of this we'll see that no matter
6:55 what my browser size is the images are
6:58 always 180 pixels wide and I'm going to
7:01 be able to scroll horizontally through
7:03 them and obviously for the vertical
7:06 scrolling container we can scroll
7:08 vertically so now let's look at
7:11 responsive margins and padding's now
7:15 what does that actually mean it means
7:18 that as the browser shrinks or grows the
7:23 padding and margins can shrink
7:25 proportionally as well in this
7:28 particular instance I have a padding set
7:32 to 15% on the top and bottom of this
7:35 container and what that means is it's
7:38 the padding is going to be equal to 15%
7:41 of the width of that particular stack so
7:46 what that means is when we preview this
7:48 and we shrink our browser down the
7:52 actual size of the padding shrinks
7:54 proportionally to the width of the
7:57 browser window so when we get down to
8:01 smaller mobile devices we'll notice that
8:05 our the content here uses up a lot less
8:08 space than it does on desktops this is
8:17 exactly how all of the banners are done
8:18 throughout the Jacke demo project here I
8:22 have a percentage padding and when I put
8:26 content inside of it the content is
8:28 perfectly vertically centered as long as
8:31 I have the padding percentage to the
8:33 same on the top and the bottom great
8:36 trick
8:37 now the last settings inside the Jacke
8:39 layout group has to do with rotation and
8:42 this allows you to actually rotate your
8:45 content and you can either do small kind
8:48 of askew rotations like this or you can
8:51 completely do a
8:52 90-degree turn on something to make it
8:54 vertical right now it's important to
8:58 note that you can actually do negative
8:59 and positive degrees depending on which
9:03 way you actually want to rotate your
9:05 content now I should note that when you
9:09 rotate content in most themes the
9:12 content could get potentially cut off
9:15 that has to do with some overflow issues
9:19 that however if you you are using a
9:22 foundation theme they should flow
9:25 perfectly beautiful and you wouldn't
9:27 have any content actually get cut off
9:29 now if you are not using foundation and
9:32 you want to rotate your content you're
9:34 gonna want to make sure that you adjust
9:35 your margins in the stack too and
9:39 padding to make sure that the content is
9:41 not cut off so you're gonna have to add
9:44 a lot of potential white pack you know
9:46 whitespace around your content in order
9:48 to see it all
9:49 however foundation users have the
9:52 benefit of its theme and content will
9:57 not get cut off even when it's rotated
9:59 now the last section here really doesn't
10:02 have to do with explicitly with any
10:03 particular settings it's just a concept
10:06 of making sure that you you play with
10:08 Jack and you can layer Jack's within
10:10 each other to really obtain interesting
10:13 effects if you look if we look at this
10:16 example here we'll see that I'm actually
10:18 using three different jack stacks to
10:21 create this picture frame where I have
10:24 the actual frame and then layers of
10:27 background with borders to give a very
10:29 interesting effect that is all done with
10:31 CSS instead of having one big image on
10:34 the page and what's great is having it
10:37 with Jack is its fully responsive and
10:40 scales around our content perfectly now
10:44 this top layer example actually uses a
10:47 couple settings I haven't reviewed yet
10:49 and that is the min max height and min
10:52 max width settings this particular stack
10:56 is set to be fill so it's going to grow
10:59 100% width however I set it to be a
11:03 maximum so the maximum width
11:06 that this frame is gonna grow to is
11:08 gonna be 700 pixels now if I turn that
11:12 off we'll notice that the frame grows
11:14 even wider but that's not really what I
11:17 wanted so what we can do is we can
11:20 constrain the width and height of a
11:23 particular stack to fit our content
11:26 needs a good height example is if you
11:29 wanted to do a proportional height or
11:32 maybe a flexible height where maybe
11:34 you're doing 50% of the browser window
11:37 but then a maximum height of 300 pixels
11:40 or something of that nature right that
11:43 way maybe it'll take 50% height on
11:45 mobile devices but on desktop devices
11:48 it'll be less or something of that
11:50 nature well that does it for the Jack
11:53 layout settings there's a lot here it
11:56 just really just scratches the surface
11:59 on what you can do by combining a lot of
12:01 these things together to really make
12:04 some amazing layouts now keep it watch
12:07 out for we're gonna be doing a video on
12:08 all the other Jack of settings groups so
12:11 make sure you check all those out I hope
12:14 you learned something today I hope that
12:16 you really take Jack learn it spend time
12:19 with it and the more you use it the more
12:22 you're going to really appreciate all
12:25 that it can do for you so go forth and
12:28 make your websites great thank you very
12:29 much everybody bye"}]