Transcript

00:10 hey everybody so in this video we're
00:11 going to be looking at the measure stack
00:14 and so go into your Stacks project and
00:16 let's go ahead and let's look at this
00:19 first demo file this is the file that
00:21 actually ships with the product so here
00:24 we have uh two different measure stacks
00:26 on this page and the settings really
00:29 couldn't be any easier once you drag
00:31 your measure in you have to determine
00:33 whether or not you want that particular
00:34 measure to be a measuring a part of your
00:37 layout or the entire browser window and
00:41 basically once you throw it into um the
00:43 container or wherever you want you
00:45 choose whether or not you want to Target
00:47 the parent or Target the
00:50 browser so in this particular instance I
00:52 wanted to Target the width of this
00:54 container and in this one down here I
00:56 want to Target the width of the browser
00:58 okay now within the settings you can
01:00 choose whether or not you want to
01:01 measure the height or the width or both
01:05 and you can just simply click on both
01:06 those buttons to choose whichever ones
01:08 you want you can have one or both so the
01:11 next setting here is the rule sets and
01:14 what this does is as you know as you
01:17 resize um your browser window the
01:19 measure stack can change colors and
01:22 update breakpoint labels um based on
01:27 various rule sets now I have all of the
01:30 rule sets defined for all popular
01:32 Frameworks here we have Foundation 6 any
01:34 bootstrap related themes um source and
01:38 then I also have some interesting ones
01:39 for iOS devices and Android devices and
01:43 if you really want to you can actually
01:44 Define your own custom rule set as
01:46 well since I'm using Foundation right
01:49 now let's go ahead and look at that rule
01:50 set and uh you can turn on labels and
01:54 show the break points for that okay so
01:56 here we are in preview of the page we
01:58 were just looking at and if you no
01:59 notice down here on this one that shows
02:01 the whole browser I actually turned on
02:03 the label as well as the breakpoint okay
02:07 um I did not turn it on for this uh for
02:10 this container based measure okay um but
02:14 notice that I use the same rule set so
02:16 the colors will fluctuate the same so
02:19 our first breakpoint for this particular
02:22 rule set is 1024 that is a large device
02:25 in Foundation now if I go ahead and once
02:28 I get below 1024 we're getting there
02:32 there it goes so now I'm at 1023 at this
02:35 point I'm now at the medium break
02:37 point and I can see that my next break
02:40 point down is going to be 640 okay
02:43 because medium starts at 640 pixels so
02:46 let's keep going down and you notice
02:48 once we get below 640 we're now at the
02:51 small break point right so this is
02:54 really beneficial um and again these are
02:56 have been updated for all the rule sets
02:58 for all the major Frameworks
03:00 so that uh in the each breakpoint has a
03:02 custom color so you can easily see once
03:06 you've crossed a break point um by the
03:09 color changing of the actual measure
03:11 stack which is pretty cool now another
03:14 thing just some nice things sometimes
03:16 these measure Stacks can maybe get in
03:17 the way of your design when you're
03:19 previewing things just go ahead and
03:20 doubleclick those and you'll notice that
03:22 they kind of fade away they're still a
03:24 little bit visible because if you double
03:26 click them again they will actually be
03:28 displayed again so um really easy just
03:31 double click it'll hide all of a set
03:34 okay now here is a power user tip if you
03:36 hold down the shift key and double click
03:40 it will toggle all of the measure stacks
03:43 on the page so again hold down the shift
03:45 key on your keyboard double click and
03:47 then that will then unhide
03:51 everything now the last setting here is
03:53 allow publish now most of the time your
03:55 measure Stacks are only going to be on
03:57 preview um you don't necessarily need
03:59 need to publish these right uh I added
04:02 this setting cuz I needed to publish for
04:03 the demos um and maybe you want to
04:06 publish too for some other reason right
04:08 so um it is there as an option but if
04:11 you don't want this published on the
04:12 page just go ahead and make sure that
04:13 this is set to off now next up let's
04:17 just review The Measure Swatch really
04:19 quick um it's behaves pretty much
04:21 exactly like the measure stack the only
04:24 thing is you target using a class so all
04:27 the settings here you choose whether or
04:29 not you want measure width or height um
04:32 what your rule set is and then all your
04:34 labels and then go ahead and you define
04:37 what class you want and then you just
04:40 simply go to the particular container or
04:42 object or layout that you want to
04:43 measure and make sure that you add in
04:46 the measure
04:51 class and that's
04:58 it