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