Chakra UI Crash Course #5 - Responsive Styles

Key Takeaways

okay then gang so in the last lesson we saw how to make a grid layout using two different components the simple grid component which is what we see here on the dashboard page with all these little white boxes and also the grid component which was used for the two sections of content that we have on the page the left sidebar and then the content and now that on the right now out of the box the simple grid component this one right here is pretty responsive so on smaller screens it adapts the width of the elements in each row and that's really nice but the other grid component the one that we use for the sidebar and the main content over here doesn't do that out of the box so we need to implement some responsiveness to this manually and we can do that by using some of chakra's built-in break points and its responsive style system likewise we can style other elements not just grid components differently for different screen sizes so let's give this a whirl so I'm just on the chakra docs looking at the responsive Styles and if we scroll down here we can see all the break points that chakra comes with so we have small medium large XL and 2XL and also before small we have something called a base kind of point which is zero width basically so if you want something to apply from zero width all the way up you would use that base property so these are the different properties we can use to style things differently for these screen sizes you can change the values of these by editing or updating the theme and I'm going to show you how we can extend or update the theme later on in the course for now let me show you how we use these different properties if you scroll right down here we can see that we're applying to this text component different font sizes at different screen sizes so the base one from zero width is 24 pixels but then as the screen gets larger to a medium screen it goes to 40 pixels when it gets larger again to a large screen it goes to 56 pixels so that's how we change properties based on these different break points and it's mobile first we start with the base and we work our way up okay cool so let's try this out in our project so I want to start off with a simple example inside the dashboard so let me do a text component click on this to import it at the top and we will save for the text hello so that's in the first grid item right here we should see it in the top left which we do now I want that to be a different color for different screen sizes so the way we do this is by say color is equal to something now we need a dynamic property so curly braces and the property value is an object so two sets of curly braces the first step because we're using a dynamic value and the second set which is an object okay so now we can say for base screen sizes so that's zero pixels and up we want this to be pink now if I saved it and left it there this means that we want to color this pink for very small screen sizes zero pixels in width all the way up to the largest screen size it will always be pink so we can see it's pink at this screen size and up and if we get smaller it's always pink I'll okay now then I also want to add on the medium property to say at medium sized greens and up it's going to be blue color and then for large size screens and up it should be green so now if we go back over here you can see if we go to the small screen size is pink when we get to a medium sized screen it goes to blue and then when it gets to large it goes to Green okay so that's how we can apply these different styles at different break points like this so now we know the basics let's go to the root layout and let's apply some responsive styles to these grid items so that we can change how many columns in width they take up at different screen sizes so then for call span for the first one instead I will use an object as a value and then we'll say at base it's going to be six columns in width I'll explain this in a second for large screens two columns in width the extra large and up it's going to be one column in width so that means when we have things like mobile screens it's going to be full width because we have six columns in the grid and this grid item is taking up all six columns when we get to large screens it's going to take up two columns in width so it's going to be like a sidebar again for extra large where we have a bit more room we only need one column okay so I'm going to copy this and I'm going to paste it down here but change the values so this call span for the second grid item which is all the main content and the navbot and the navbar sorry is going to be 6 for the base size so they're going to stack on top of each other this takes up the full width and this takes up the full width and then for large screens it's going to be four because we have two over here plus four is six but extra large it's going to be five because one plus five is six okay now I also want to apply some responsive styles for the padding so object and we'll say base is going to be 20 pixels and then also when we get to large screens we're going to increase that to be 30 pixels so the padding is larger for larger screen sizes so let me save this and we can see now when we're in a medium-sized screen it's taking up those two columns in width when we get to I think that was actually large yeah so when we're at Large Size screens it's two columns in width at extra large it's one it gets smaller when we go right to tiny screen sizes now this takes up 100 in width and so does this okay so that my friends is now all working and that's how we can apply responsive styles to different components now before we go on I have just noticed a typo right here it shouldn't be HV it should be pH so if we save that now you're going to see something happen and this is taking up 100 VH height so it's taking up the full height of this browser as we load it onto the screen now that's fine when we have these larger screen sizes because that's what we wanted because even if we were to comment out all of this right here all of this content which is bringing the grid height up then it's still going to be full height and in fact no we can't do that because we need some kind of content so let me just do a div right here just so we have some content save it it now takes up the full height right here okay and if we didn't have this height right here if it was just like taken away let's save it then this height would only be whatever the content dictates it to be so we need that in however if we just undo what we did here because we're saying that the Min height is always this even for small screens when we get down to small screens it's still taking up that massive height so this needs to be responsive as well so what I will do is say that this only kicks in at a certain break point now we don't need the base break point right here because the height is going to be automatic right here so we just say when we get to large screens and up then I want you to apply a height or a mid height of 100 VH like so okay so save that and now you can see we have that smaller height for smaller screens when we get to larger screens it's going to be 100 VH again awesome