Transcript

00:00 I got the easiest way to match elements
00:02 on your page right now hey everybody
00:11 jerk Minh and in today's video I want to
00:13 show you the new match height stack and
00:15 this stack does exactly what the name
00:18 says it allows you to match the height
00:19 of various components on your page right
00:22 and what's awesome is that out of the
00:24 box it works beautifully with all of the
00:27 default column stacks so it doesn't
00:29 matter what framework you're using you
00:31 can use the default column stacks you
00:33 can use foundation columns right you can
00:36 even use it inside foundry with the
00:38 foundry column stacks and it integrates
00:40 with a bunch of other stacks right out
00:42 of the box as well so if you want to
00:44 equalize your Jack's tax your sections
00:47 pro your sections box right and a lot of
00:50 other stacks you can easily match the
00:52 height of those stacks what this deck
00:55 does is it looks at the content from all
00:57 of the stacks that you want to match and
00:59 then it takes the height of the tallest
01:02 one and then it makes all of them the
01:03 same height so everything looks uniform
01:05 and it's super easy to use so let's jump
01:08 on in and see exactly how easy it is to
01:10 use so here we are inside the match safe
01:15 demo file and this is the file that
01:16 ships with the stack when you purchase
01:18 it now if we look at this first demo
01:21 here this is the simplest example where
01:23 we just take a simple three column stack
01:25 and we're going to match the heights of
01:28 each column to be the height of the
01:30 tallest column so here we are our last
01:33 column here has the most content and if
01:36 you notice the first and second column
01:38 stacks actually match the height of that
01:40 last column and just to see what it look
01:43 like without match height here we go and
01:45 if we click on the without match height
01:47 tab will see this this is exactly what
01:50 our layout would look like without match
01:52 height and what's awesome is that match
01:56 height doesn't require any sort of
01:58 frameworks or external requirements it
02:01 even works great with the default column
02:03 stacks here I've built a just a really
02:07 simple column layout with the just the
02:09 default column stacks this is the stacks
02:11 three column inside here has a
02:14 one column inside each column so that we
02:16 could have a background color and then
02:18 inside that we have an image and text
02:20 and what you'll notice here is that the
02:23 text inside this middle column has more
02:26 than the outside columns okay so it's
02:28 going to be taller let's have a look and
02:30 preview this website so as we see here
02:33 this is what my default layout is going
02:35 to look like right here the first column
02:38 is shorter than the middle and then the
02:40 third column is actually shorter than
02:41 the first and second right but I think
02:44 this would look so much nicer if all of
02:46 these columns actually matched the
02:48 height that is super easy to do with
02:51 match Heights all you need to do is add
02:53 the match height stack to your page add
02:56 your layout into match height and we're
03:00 done that's all we need to do match
03:02 height makes it extremely simple to make
03:05 your columns match height right because
03:08 that's what most people are going to
03:10 want to do so I wanted to make that a
03:11 complete no-brainer just worked straight
03:15 out of the box now obviously match
03:18 height can do a lot more for us in terms
03:20 of complex layouts right so let's look
03:24 at this second demo on the match height
03:26 demo project here and here i'm going to
03:28 show you this is what my layout looks
03:30 like without match height okay first
03:34 we'll see that this pricing table here
03:37 is different sizes right so every column
03:40 is a different size now also my headers
03:42 are our different heights as well I'd
03:45 like for the headers to match and then
03:47 I'd like the body of the pricing table
03:51 to match as well if we go back to the
03:53 first tab in this demo you'll see that
03:56 match height is matching the headers for
03:59 each okay so it's taking the largest
04:01 header and it's matching those and then
04:04 it's taking the largest middle portion
04:07 and matching all three of those as well
04:11 so if we look at the middle tab here in
04:13 this demo will see that i'm actually
04:16 excluding the middle table from my
04:19 layout and then here we have the headers
04:22 on the first and the third column are
04:24 the same and then the bodies on the
04:26 first and the third
04:27 are the same this kind of allows me to
04:29 accent my middle one because maybe
04:31 that's going to be my best deal right so
04:35 these layouts are really awesome because
04:37 we can define multiple rules using match
04:40 height now if we check out our third and
04:43 last demo inside this file okay we have
04:46 multiple different things going on here
04:48 here is the layout without match height
04:50 turned on we have mixed height content
04:53 um and then we have two different groups
04:56 right so we're matching the green ones
04:58 are going to be matched and then the
05:00 yellow ones are going to be matched with
05:01 each other by default okay match height
05:05 will match everything on a by Rho basis
05:07 and what I mean by that is that if we
05:12 look at this first row we will see that
05:15 match group one all has the same height
05:18 but if we look at match group one on a
05:20 row two they have a different height so
05:24 match height is smart enough to realize
05:27 when elements are on the same row and
05:31 then match all the height to just the
05:34 elements in that row this is really
05:37 really awesome now we can also ignore
05:40 the row so ignoring the row all of group
05:44 1 are going to be the same exact type
05:46 throughout my entire layout this same
05:49 thing for group 2 no matter where they
05:51 are inside the layout they're going to
05:53 be the same exact height now this last
05:59 demo does something called stop brakes
06:02 and what this does is it allows you to
06:05 define break points a start and ending
06:08 breakpoint for when particular match
06:11 rules are ignored so for this layout
06:15 between seven hundred and a thousand
06:17 pixels my match rules are going to be
06:19 disabled if we see as I resize this
06:22 layout down as soon as we get below a
06:25 thousand pixels like it did right now
06:28 you'll see that the match rule has
06:30 stopped and everything has inherited its
06:33 default size okay and then we can go a
06:37 little bit further down once we get
06:38 below 700 you'll see that now
06:41 since we're below 700 the match rules
06:44 are taking a place again now these
06:47 values are completely customizable so
06:49 you have control over when the stop and
06:52 start points are for these break points
06:54 so there we have it that is match hype I
06:57 hope you see the power and the
06:59 simplicity of it and how easy it is to
07:01 use now I didn't go into depth on the
07:04 more advanced tutorials right make sure
07:06 if you want to see how those are
07:08 implemented and the ins and outs of all
07:10 the settings to accomplish that make
07:13 sure you check our other more in-depth
07:15 video on match height but until then I
07:18 hope you enjoy match height I hope that
07:21 you use it to make your websites really
07:23 awesome until then bye-bye
07:31 you"}]