Material UI Breakpoints and Responsiveness

hey guys and welcome to this video in the last video i went over material why and i showed you examples of using more components also i showed you a basic example of um using uh responsiveness or how to achieve responsiveness in material ui the video was very long and the quality wasn't that great i wasn't really happy with it but it was took me ages to record and so i wasn't going to throw it away even though i wasn't happy with it so in this video i decided to go over and break points and responsiveness and how can you achieve that in material ui i'm going to try and keep it shorter so that it maintains the quality so let's get started so if you can remember from the last example we created this page here which has an icon button and tabs which are used to navigate different pages or links and also a header and this block right here and so when the screen shrinks we hide the typography along with the bar beside it and i showed you how that's been done but i want to explain more about responsiveness in um material ui and the most popular way to do that is to use breakpoints inside your style.js so something like this and so material ui comes with four different helper functions so we have down i'll just write it down here so we have down we have only we have between and we have up i believe it's called up yes and so these help us target the breakpoints that we want and the breakpoints material ui already comes with its own breakpoints which can be configured can be renamed it can be changed in in terms of value and so if we were to look at the breakpoints in material ui it shows you that we have one two three four five different breakpoints and they are named as xs for extra small small or sm for small md for medium lg for large and excel for extra large in css we would use something as media query media and and so on in material why we don't do that instead we use these helper functions which will return that media query string for us okay so you don't need to worry about writing on media you just need to use these functions here and they'll do the job and so let's go through them one by one maybe so we've added an example here so that we hide the text or the typography here along with the text or the block that's included with it when it reaches small or down and that's like saying and max and media max width and small basically but instead of that we say theme breakpoints down so we include the themed breakpoints and the function the helper function inside brackets okay and then we do the block and this style basically that we want to execute and when that condition is met so basically this here returns the media query string but we don't see it here okay we only see this and so let's do something else for example let's do um actually before we do anything else i need to explain something so when we look at the breakpoints here we're doing we're saying sm and down so this means small and down so initially you might think that because sm is 600 okay so sm is the breakpoint is 600 you might think this means from 600 and down to zero then hide this but that doesn't work like that in material ui if we look here extra small extends from zero to nearly 600. sm extends from 600 to nearly 960 to like to medium so what we're saying here is that i want this css to be active when the breakpoint is small or below small and if we look here small starts at 600 and it ends at 9 50 9. so right before medium and so it's the breakpoint will be active or this code will starts being active from 959 until zero so when you say small small means all this length when you say medium it means from 960 all the way to right before large when you say large large includes all the way from 100 and 1280 all the way to 1900 and so right before it reaches the next point that's what it means so it's extra small here is m0 to f599 basically i hope you understand this it's uh it's very confusing for a lot of people and me myself i was a bit confused and didn't understand what was happening so let's show you more examples so as you can see we have the functions here and and basically think of them as media queries because they do return media query strings and instead of having to write and max width and min width they basically give you helper functions that do that for you so let's do something else let's remove all of this and let's go back to our um code here and actually let me close this down and let me do something so let me save this to get everything back in track yep so i'm gonna do something with the button when it reaches a smaller size for example or with the with the text sorry i'm going to do everything here so for example i'll start with the app bar and i'm going to say i'm going to change the background of the upper when it reaches a search a certain point so when it reaches i want to say maybe um extra small i'm going to move this beside it so when it reaches extra small so i'm saying extra small zero to um five uh 500 and 599 basically so when it reaches that i want to do something so i'm going to to use the breakpoints we need to use the theme so we'll do theme we'll do theme dot breakpoints dot um we'll do down maybe or up we'll do up for a change and in here we'll execute our code so i'm gonna do something to the app or maybe when it's at medium or above medium and so right now when i say medium it's going to start at 960 or up okay if it was down it will start let's say medium and down it will start at before the end of the next before before the end of this point so right now i'm going to say md and this is how you reference the breakpoints xs sm md large excel it can be changed using the theme provider and it can be changed into your own uh meaningful text so like you can say tablet phone laptop and so on so right now i'm saying themed.breakpointsupmd and i want to change maybe the background color actually it's just color and i want to say maybe it's uh purple so i can see it i'm going to save that go back to my code and refresh and if i was to go as you can see here it changes the color once i expand the screen and the reason that not everything got changed is because i changed the color of this background here to white or this icon but i think it was a div yeah so if i was to get rid of it and expand it you can see it is a purple and if you can see here it only turns purple once we reach a certain point so 965 964 960 and 959 so 959 right here it stays the same or the minute it hits 600 or 960 that's when it changes and so what does that tell us is that you got to be careful when using this because it can be very confusing so we said medium and up so start this or activate this breakpoint when it's at 960 or 915 960 all the way to extra-large so anywhere from 960 any desktop or screens that are greater than that size will have this um this uh this color so the next thing let's use another one let's do maybe um let's see let's do something let's use the only so we'll have another break point here themed.breakpoints dot only and i'm going to say extra small for change or extra my bad extra small and in here i'm gonna say i'm gonna change the color maybe i'll change the color of it because it's the the text i'm gonna say i want it to be gold so what the what the access is or what the only is it says that only when the breakpoint or the screen size is between 0 and five ninety nine so only when it's between this so basically these lines shows you gives you a better explanation of how far this point extends so anything else above the 599 it's not going to get affected and so therefore we need to as you can see it's sounds already been resized but this is the original color and if we were to resize it to as you can see now extra small this is extra small because this is 595 or under 599. so anything below that is gonna be affected anything above that will not so this is what only is let's move on to the between and so the between one is like saying between this width and this width so between two different breakpoints and let's look at the tabs maybe or let's look at the toolbar yeah let's look at the toolbar so i'm gonna come down here and i'm gonna say theme dot breakpoints dot and between and in here i'm gonna pass in my two breakpoints so in here i'm going to say between extra small and between medium i want to do something or between small maybe let's say small actually because i don't think my screen can go and offer i want to do something what do i want to do i want to change the background to our background color just background to red just to see it working and so i'm going to save that and so i'm going to go back to my code and look at it and it's already taken effect and if i was to go higher than medium you can see the style doesn't get applied so anywhere from medium to extra small the style gets applied and so what does that mean or what does this mean here if we go back to the code we're saying anything from zero to small so anything from here all the way to here i want you to apply this style but once the screen size goes above this once it gets to 960 and higher i don't want you to apply it so you can see it's pretty straightforward and one last thing i want to show is the down i know i showed it in the last video but quality wasn't great as i said so let's do it here and we'll do and actually let me let me go a bit higher so you can see the screen we'll do theme.breakpoints.down and in here i'm gonna say small so it is up to you to decide what breakpoints your website needs and you know you don't have to take all these breakpoints into consideration you can choose to select three of them or four or five it's up to you really um so in here i'm going to say background color background color blue and purple or maybe produce yellow and i think down is one of the helper functions that people get confused a lot with because it doesn't really start where the breakpoint tells you instead it starts from where it ends so in here what we said we said activate this code or this style when it's that small when the breakpoint or the screen sizes is 600 or 959 and below that so this was say what it says basically so activate it when it's right here at 959 and below that so anything from small and below small because we as we know small is from 600 to 959 and so if we go back to our page and as you can see right now it has been activated if i go anywhere above that it gets deactivated if i go lower than that it gets activated again and that's basically it in terms of styling from a css or from styles.js there is other things that you can use such as a helper functions uh or a helper function that can help you and get the width of the screen and based on the width you can re-render or render certain components and i believe it's called if we go back to the code here or to the page there's a higher order component called with width and basically what we do you wrap your component in this and then this higher order component will return the width prop which can be used inside your component to conditionally render elements also just keep in mind that this width width will be deprecated and and so it is recommended here to use the use media query hook okay and if we want to look at it it gives you all the explanation and how it's been used here it's a react hook so it gets used inside functional components and gives you different examples of it so i hope you enjoy this video and i'll see you again in the next video

Channel: The Devlpr

Views: 2,241

Rating: 5 out of 5

Keywords: vscode, code, vs, VS, VSCODE, visualcode, microsoft, coding, programming, programmer, coder, web, developer, dev, script, javascript, editor, codeeditor, extensions, productive, productivity, react, themes, theme, ide, IDE, tutorial, devscript, ibm, ibmer, IBM, IBMER, cloud, ex, employee, frontend, backend, devops, create, npm, yarn, template, command, tools, tool, package, package manager, manager, node, cli, material ui, Material UI, Material ui, ui, UI, breakpoints, responsivness, styling, css, styled component, responsive

Id: xRMCZfGhHyM

Length: 18min 24sec (1104 seconds)

Published: Tue Dec 08 2020