Vuetify Tutorial #6 - Breakpoints & Visibility

Key Takeaways

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