or rather than gang so first of all what
is a break point well break points are
typically with values in pixels which
represent the width of different devices
or viewports which we might view the
website on and at these break points we
typically rearrange the layout of our
site content if we need to to fit into
that device width nicely so for example
we might have a break point for small
screen sizes which is going to be
roughly around 400 to 500 pixels and
this would target everyone viewing the
website on a mobile phone for example so
at this break point we might want to say
okay or rearrange the content this way
or show and hide these elements etc we
might also have a break point around
about 700 to 800 pixels for certain
tablets and we use that break point to
rearrange our show and hide content for
those devices etc and it goes all the
way up to large screens
okay so beautifier comes with a
predefined set of breakpoints and helper
classes which allow us to do certain
things at those different break points
for example if we want to make things
invisible on a desktop but not on a
mobile for that we've used one of UT
Phi's break points and a visibility
class all right so that's what we're
going to look at in this video
all right then so the first thing I'd
like to show you are the different break
points that beautify comes baked with so
if you go to the search and just type in
break point click on the top option
you're going to see these different
codes right here excess the extra small
that's for mobiles SM for small things
like tablets medium and D for medium
sized screens things like laptops LG for
large desktops and XL for 4k and ultra
whites so we have the pixel range right
here as well for each of these different
break points so for example if we're
targeting medium sized screens were
targeting this break point range between
960 and 1264 pixels all right so these
are the different codes that we can use
in our different classes now what I'd
like to do is look at visibility so let
me just type in visibility
right here so say for example we want to
show something on desktops but not on
mobiles then we'd use a visibility class
and it follows this format so if we want
to hide something we say hidden - then
the breakpoint code which we've just had
a look at so XS s and D etc then - then
the condition so for example if we only
want to show something on extra small
devices we'd say hidden - XS - only so
then it's only going to be hidden on
extra small devices ok so then what
we're gonna do is a couple of examples
of these I'm going to go back to the
code and you can see I have a blank home
page to work with and the first thing
I'm gonna do is a V - button and this is
going to say click me and I'm gonna
apply a visibility class to this so
class is equal to hidden and then the
screen size is going to be MD then the
condition is gonna be and - down so what
I'm saying is okay well hide this button
on medium sized screens at that
breakpoint and down so for anything less
the mix of small screens and extra small
screens as well so this and down things
that I've done is one of the conditions
we have these three conditions only and
down and and up
so let's now save this and preview it in
a browser and we can see it the minute
it's hidden if i refresh then it's still
hidden I think this is because I'm
zoomed in so if I reset that okay now we
can see on large screens we see this
button if I inspect now and reduce the
size of the screen what I'm gonna do is
just scoot this along when it gets to a
medium sized screen is going to
disappear because we've said hidden and
medium sized screens and down and all
the way down now to small screens it's
not going to show until it gets to a
large screen again okay so that's the
first one let me comment this out
control /to do that and then underneath
I'll do another one v - BTN and this
time it's going to have a class
equal to hidden and then this time it's
going to be MD and up so not and down
this time it's gonna be and up again
let's say click me so this time I don't
want to show this for medium sized
screens large and extra-large but I do
want to show it on anything less than
medium all right it's only hidden on
medium and up so if I save this now we
can see all of these screen sizes it's
hidden when we get down to a small
screen size boom it appears all the way
down to extra small as well
okay so that is hidden MD and up all
right let's do one more example so
comment now and down below we'll say V -
BTN and again we'll say click me and
this time this is going to be hidden on
small screens only so class is equal to
hidden - SM - only so we're saying here
small screens only not extra small
Mobile's just small which is things like
tablets so if we save that and preview
this again we can see when we get to a
small screen it disappears but if we go
down to an extra small screen it
reappears so only for this period in
between extra small and medium for small
screens it disappears so that is only
being hidden for this breakpoint range
okay so there we go my friends that is
visibility and they are the different
break points that beautify employees
inside our projects