Transcript

00:07 hello everyone this is Joe workman and
00:09 today I'm really excited to introduce
00:11 you to Jack for now Jack is gonna be
00:14 your new best friend it is just such an
00:16 amazing stack it does so many things
00:18 that it's gonna be your go-to stack for
00:21 so many different rapidweaver layouts
00:24 now Jack's been around for a long time
00:26 but what we've done with the Jack for
00:28 release is that we've really paid
00:31 attention to the details and it's a lot
00:33 easier to use and we've taken a lot of
00:36 work to actually show you all the things
00:39 that you can do with Jack so we're gonna
00:42 review a lot of those features today in
00:44 this video now watch out for future
00:47 videos we're gonna go over each feature
00:49 in detail but for right now without
00:52 further ado let's jump on in to Jack so
00:56 here we are on the Jack layout page and
00:58 what we'll see here is a lot of the
01:00 layouts features that we have within
01:02 Jack now Jack comes with a lot with a
01:05 couple really great advanced type
01:07 controls the first is allowing allowing
01:10 you to keep Jack at a proportional
01:12 height width for example here in this
01:14 blue box that we see Jack will maintain
01:17 that 16 by 9 ratio all across from
01:20 desktop down to the mobile device okay
01:25 Jack also has the ability to set the
01:28 height of itself relative to the its
01:32 parent stack so here we have an example
01:34 where we have a large box and jack has
01:37 been set to take a 50% height of that
01:40 box now you can also set Jack to be
01:43 relative to browser Heights so here we
01:46 are on the full height Jack page all
01:47 knows that Jack is set to be 100% height
01:50 of the browser window and then we can
01:53 scroll down to see the content and these
01:56 Jack stacks here within here are
01:58 actually set to be 50% of the browser
02:00 height now Jack also allows us to
02:04 control the scrolling so we can actually
02:06 have data that actually Scrolls both
02:08 vertically and horizontally next we have
02:12 responsive margin
02:13 and padding and what this allows you to
02:15 do is to actually have the margins and
02:18 padding reduce in size based on the
02:21 browser width and what you'll notice on
02:24 mobile devices is that Jack responds the
02:27 padding down based on the browser width
02:30 so on smaller devices Jack will have a
02:32 smaller footprint now the next feature
02:36 allows you to actually rotate the entire
02:38 contents of Jack what we've done here is
02:40 we've done a nice example of using Jack
02:42 to rotate some photos to give you a nice
02:44 effect on your page and last but not
02:48 least don't be scared to layer your
02:50 Jack's layering this particular example
02:52 uses three Jack stacks with various
02:55 effects to actually create a really
02:57 beautiful frame now let's look at what
03:00 Jack can do for our borders now Jack
03:03 ships with eight different border styles
03:06 so you can do stitch looks and a lot of
03:08 really great looks to accent and
03:11 accentuate your your content including
03:15 border opacity and this is a really
03:17 sought out really cool feature next
03:20 thing is round corners not only round
03:24 corners you can obviously change the
03:25 corners on one side or all sides but you
03:28 can make some really great unique shapes
03:30 pill boxes and even circles with Jack
03:34 and last but definitely not least is
03:37 Jack ships with over fifty frames that
03:40 will scale proportionally to your
03:42 content this makes it 100% responsive
03:46 and you can look at the jack frames page
03:49 to see all of the available streams that
03:52 actually ship with Jack now backgrounds
03:55 really can make your website pop okay
03:59 now obviously Jack can do boring solid
04:01 color backgrounds but if you had some
04:04 transparency to it it could really make
04:06 a sexy experience okay
04:08 now Jack can also do image backgrounds
04:10 so we can have nice tiled images we can
04:14 actually scale an image to cover the
04:16 entire width and height you can control
04:20 the repeats of your title so it may be
04:21 only accent one part of your Jack stack
04:24 and lastly you can
04:27 do fixed backgrounds so as you notice as
04:29 I scroll and up down the page the
04:32 background image is fixed this is how we
04:35 can achieve parallax effects using Jack
04:37 now Jack ships with over 250 tiles that
04:42 you can use directly from within stacks
04:44 and this page here you can use as a
04:48 legend to determine exactly what tile
04:51 you want to use for your site
04:53 this shows small previews of all the
04:56 tiles that ship with Jack so you can see
04:58 exactly what it's going to look like
05:00 when he put it on the page Jack can also
05:03 do great gradients linear gradients
05:06 radial gradients ellipses two tones and
05:09 something that's specific to Jack is
05:11 that I developed a great fade gradient
05:14 that allows Jack to fade to be a hundred
05:17 percent transparent as well as fading
05:19 jacked into a background so this is a
05:23 great effect that I can't wait to see
05:25 what you guys do with and last but not
05:27 least Jack allows you to animate your
05:30 backgrounds this works exceptionally
05:32 well with background tiles since tiles
05:36 will scale infinitely but you can really
05:39 make your website pop with some great
05:42 background animations I recommend trying
05:45 some subtle animations if you look at
05:48 the top banner on this Jack backgrounds
05:50 page you will notice that it's actually
05:53 slowly animating to the top left of the
05:56 page this is a very subtle style that
06:02 really is amazing now Jack has a lot of
06:07 highly configurable shadow controls you
06:10 can actually add up to three different
06:12 shadows to the same Jack instance and
06:15 this gives you a lot of possibilities
06:17 for some amazing effects as we see here
06:20 we can have a great raised corner effect
06:22 that is very popular and these shadows
06:25 are a hundred percent configurable as
06:30 you see down here we have a great peak
06:32 effect where the shadow Peaks above and
06:35 below but not on the sides of Jack
06:38 University you can do the same thing on
06:39 the sides so that the top and bottom
06:41 really don't have a shadow but the sides
06:44 do you can have great inset shadows as
06:48 well as flat hipster shadows as well now
06:52 last but definitely not least is Jack's
06:54 amazing hover effects so Jack ships with
06:58 a second stack called Jack hover and you
07:01 can use this hover stack to completely
07:04 modify the look and feel of Jack when
07:06 you hover over it let's look at some
07:09 examples so here for layout we can hover
07:12 over and change the width and height of
07:14 Jack here we can actually change the
07:17 rotation so when we hover over it it
07:19 just kind of skews a little bit and you
07:22 can actually combine these and do modify
07:25 when you hover over it it'll rotate and
07:27 change the width of Jack these are just
07:30 a few of the examples really can do a
07:32 lot more with these hover effects with
07:35 hover border you can change the size and
07:37 opacity on hover as well as doing a
07:41 really cool thing and morphing a jack
07:44 stack from a square to a circle very
07:48 cool
07:50 next we can hover backgrounds so you can
07:53 actually change the entire background
07:54 image on hover as well as the opacity
07:57 for a more subtle elegant effect and
08:02 last but not least we can hover shadows
08:06 so as you hover you can actually change
08:08 the shadow effect within Jack so that is
08:12 Jack there's a lot baked into Jack right
08:14 I mean you could do so many things I
08:16 mean I blazed through these features and
08:19 it still took go up a lot of time right
08:21 so um Jack again it's gonna be your new
08:24 best friend the more you use it the more
08:26 you'll learn how to use it and the
08:29 better it's gonna be for you so I hope
08:32 you enjoy Jack I hope you use it to make
08:34 your websites great I have a great day
08:37 everybody enjoy it thank you bye bye"}]