[Music]
hey everybody Joe Workman here and today
I'm really excited to introduce you to
the new measure stack now this is a new
suite of design tools that allow us to
ensure that our website layouts look
great on all devices let's check it out
now the first tool that we're going to
look at is the measure stack and as you
see on this page I have two examples of
them uh this first example is going to
be measuring the actual container size
and the second one's actually going to
be measuring the entire browser window
so as you see these are great tools to
use within preview and as I resize my
browser window you'll notice that the
values of the actual rulers change to be
the actual live dimensions of that
particular component whether or not it's
this particular box or or it's the
browser window now you will notice that
these actual rulers change colors they
change colors based off predefined rule
sets Now by default the rule sets are
from Foundation 6 breakpoints but
there's a lot of really great bakedin
rule sets for all Frameworks as well as
some popular devices now these work
really great inside responsive design
mode cuz as you see I can take my
browser window down really small to what
the smallest mobile device could be and
I can see exactly what the dimensions of
my objects on the page are also if
they're in the way just simply double
click to
hide now the next tool in our toolbox is
the measure Swatch now this behaves
exactly like the measure stack does but
it gives us that amazing Swatch feature
where we can just add a class to
anything we want in order to measure it
so here I created a Swatch that just
simply ties to the measure class all you
need to do is add that class to whatever
container we want
and it just does it so when we preview
this we'll see that I'm actually showing
you the iOS device rule set now here
because there's no iOS device this large
it's displaying
desktop but as we resize the the window
down we'll see that we'll start getting
to actual break points for iOS devices
so here we have an iPad Pro
12.9 so if we look at responsive design
mode we'll see that the actual break
point points for every single different
iPhone are available directly right here
within
measure now the measure stack bases all
of its actual break points on the device
width so in responsive design mode when
we change the height it doesn't really
affect the actual break points for that
let's look at our next
tool so here we have the device viewer
and when we preview this we'll notice
that we get a drop down of every single
iOS iPad and many different popular
Android and surface
devices and let's go ahead and pick
one that will then open up a popup
window of the exact dimensions of the
iOS device that we have chosen want to
turn it landscape mode go ahead and
click this button and you now get this
device directly in landscape mode and
you can scroll down and view your
designs on that particular device want
to try a different device let's go ahead
and select a new
one let's go ahead and pick an iPad 10
and there we go here's the exact
dimensions of what our website will look
like on a on this particular device so I
hope you can see how useful the measure
Suite of design tools can be it really
allows you to fine-tune your layout so
we can measure things and really preview
them on tons of different mobile devices
directly from preview it's really cool I
hope you enjoy it and go forth and make
your websites great
[Music]
bye