Top 10 Advanced CSS Responsive Design Concepts You Should Know

responsive design in CSS is incredibly important and you may think if you understand media queries you understand responsive design but there's so much more to responsive design than just simple media queries in this video I'm going to cover about 10 different topics on how you can improve your responsive design skills some of them are going to be related to Media queries but many of them aren't even using media queries at all [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to get started with this video I'm going to cover some of the more simple Concepts and then towards the end we're going to talk about some of the more advanced concepts that don't even use media queries at all now the very first responsive design concept you need to understand actually starts in your HTML and that is this simple meta tag right here for your viewport if I remove this line of code my site on mobile is going to look very weird so right now I'm using a mobile version of my site as you can see and if I just remove this line of code and save you'll see it looks like everything's working just fine but let's add in some text let's just say we're going to add in a bunch of text now you can see that my page Scrolls horizontally which is definitely not ideal and you've seen websites like this all the time while if I just come in here and I bring that line back in add my text in and I do a save now you can see all of my text is fitting on the page exactly as I expect so what this line of code does I'm essentially breaking it down is it saying that the width of your screen should be the same width as your device so no matter what size my screen is or what size my phone is the width of my content is always going to be the same as the width of my device and this initial scale right here it tells you what type of zoom level you want to be at when you load in your page for the very first time so let's change this to three for example and all I'm going to do just to show what this would look like is I'm going to toggle off mobile view and then toggle it back on and now you can see my page is way more zoomed in than before it's three times zoomed in if I change that back to one and then I just do a quick inspect real quick so I can get that back toggle it off and back on now you can see I'm back to one time zoom so the reason we put this into our page is to make sure our width is perfect and we make sure that we're not excessively zoomed in or zoomed out so it's just defaulting to a normal zoom level now the next concept that I want to cover is going to be a concept for media queries so if we just come down here and I Define a media query and this media query I could say like Min width 200 pixels and then I could change my box to have a background of red so now you can see since we're above 200 pixels the background is red that's pretty straightforward let's change it to like 500 pixels real quick now you can see that we have a purple background and if we just inspect our page and we go back over into that mobile view there we go now we can actually just move this around and you can see based on my screen size my box is changing colors super straightforward everybody understands this but something that you may not know is you can actually do more than just check widths for example you can check orientation inside here so if I just type in orientation I could say landscape and now whenever I'm in the landscape orientation so essentially my page is wider than it is tall you can see the Box turns to red and I can change this to portrait there we go and now whenever my height is taller than my width it's going to be that media query so this is really useful if you're on like a tablet or if you're on a phone you can swap between portrait and landscape or if you just want to determine which direction is wider is it wider or is it taller it's a really useful media query another really cool thing you can do is Media queries on aspect ratios so I could say Min aspect ratio is like one to one for example and now if I just give this a quick save when my aspect ratio here is above one to one essentially my width is wider than my height that's what one to one is saying you can see this box is changed to Red I could also do something like 16 by nine so once my width expands past that 16 by 9 ratio for example if I really shrink down the height here you can see the Box again changes back to Red now there's a ton of different stuff you can do in this media query another one is like prefers reduced motion there's a bunch of preferences based on people's like motion preferences or data preferences those don't really have to do as much with responsive design but it's still important to know because it's important to cater your website towards people that want things like high contrast colors or animations or lack thereof now the next three concepts that I want to talk about are all somewhat experimental with varying levels of browser support I'll cover all the different browser supports when we get to that point the very first one I want to talk about is how you can do ranges with CSS media queries so normally you would write something like Min with 200 pixels you know or whatever it is 300 pixels and then based on our width you can see that our box is changing colors but this is a little bit difficult for me to read personally so I much prefer to do something along the lines of width is greater than or equal to 300 pixels that is essentially going to do the exact same thing once our width is greater than or equal to 300 pixels our box is red and below that our box is purple but this is much easier to read so we have the ability to do greater than equal to greater than or equal to we have less than less than or equal to we even have equal to if you really want but it almost serves no purpose at all and best of all is you can actually combine these together so you could say like 100 pixels is less than or equal to our width and our width is less than or equal to 300 so now we're between 100 and 300 pixels you can see our box is that red color and then when we're less than 100 or above 300 it changes back to purple now as for browser support on this let me just drag this over as you can see the browser support is currently 71 and the only browser we're waiting on here is Safari all the other browsers support it so hopefully this will come in relatively soon but if you don't want to wait you can use a plug-in like post CSS they have the ability to do these range syntaxes and it'll just convert your CSS from the range syntax to the old syntax and it'll work exactly the same and it'll work on all browsers now the next concept I want to talk about has even better browser support it's really almost entirely there and that is container queries which is one of my favorite new features in CSS I actually have a full video covering it linked in the cards and description but I'll give you a really short example of what it is so let's just come into our code and let's just add in a simple sidebar and inside that sidebar let's add a box and we can just get rid of this Lauren ipsum text we don't really need that right now so we can do just expand this out so we can see what we're doing we can create our sidebar are and for a sidebar let's just give it a width of 20 percent and we're going to come in here and we're going to give it a border on the left of 200 pixels and then we want to make sure that our body here is going to be a display of flux just so they're going to show up side by side so we'll just say display Flex just like that so now our sidebar takes up 20 of the width of our screen and what we can do is we can just get rid of this mobile view so things are a little bit easier to see so it'll be a little bit wider so let's just get rid of that there we go and we'll Zoom our page out a little bit there we go now let me fix my border here this should obviously be one pixel solid black instead of that 200 pixels there we go so now we have our border on the left or on the yeah right there on the left and let's also give our boxes a little bit of margin so we can just see what they look like 20 pixels there we go so we have a box on the right hand side and a box on the left hand side and you can see that they're pretty big we'll shrink them down a little bit let's do 100 by 100. there we go now we have our two different boxes inside of our different containers also one last thing that we should probably do is we're going to wrap this normal box inside of some like main container and then we can just come into our CSS we can say dot Main Flex grow one there we go let's just save both of those and now you can see this box on the left hand side is filling up a lot of space in this box on the right hand side is push to the side we can make our sidebar a little bigger let's do like 30 there we go so we essentially have our sidebar and our main content now this is fine when you just have like one page but what happens if you want to have a component in your main section like this purple box and we want to have a component in our sidebar section and we want to change this component based on how much space it has because if our screen is for example you know really large like this you can see that we have lots of space on the left but not too much space on the right so our media queries would all be for large screen sizes but this component on the right actually doesn't have that much space so we want to be able to say how much space does this have inside of its container and size it or change it based on that so what we're going to do is instead of using a media queries because for example I could say like media query width is greater than or equal to let's say 600 pixels so when we're larger than 600 pixels our boxes are going to be red so if we expand this you can see once we get to this point our boxes both turn red let's say this red styling was like adding additional content well on this right hand side there's not enough space for that additional content but it's still showing up as read in our scenario because our whole page is larger than 600 pixels instead we can change this to an at container query and this right here is going to say use the container you're inside of to determine your actual width then all that we need to do is we need to tell our boxes or our container query what the container is so we have our main container and our sidebar these are both our containers so we can just say that the container type for these is going to be an inline size now if I give that a quick save and I change this to something like let's say 400 pixels you can see this left hand section this main content is larger than 400 pixels so it shows up as red while this box over here is in a container that's less than 400 pixels so you can see it shows as purple still and once our entire page shrinks down where the main content is also less than 400 pixels you can see that changes to purple this is really useful especially when you're using like component-based libraries like react and again I'd highly recommend you check out the full video of me covering this because there's so much more than just what I'm covering here now as for browser support it's surprisingly good you may see this number of 73 and think that's not that great but if you look here it's actually supported in every single main browser and even Firefox just rolled out support for this very recently in the newest version so just given a little bit of time maybe a couple months hopefully this will be you know up to like 90 support because it'll be in every browser you can just see here if we check usage relative the main thing is like older versions of safari like iOS aren't quite updated yet and again some of the Safari and Firefox browsers have not been quite updated to the newest versions but give it a couple months like I said and this should be closer to that 90 number and ready for use now the last somewhat experimental thing I want to talk about is custom media queries and unfortunately this one has by far the worst browser support so let's actually just get rid of all this additional code just go back to that box that we had before I'm gonna get rid of all the stuff that we have up here we don't need any of that there we go and let's just make our box perfectly fine that's how it is and we'll change this back to a media query most often when you're dealing with media queries you're going to have queries that you repeat everywhere for example your width greater than 400 pixels maybe that's just a size you repeat everywhere in your application but it's a huge pain to have to you know copy this down a bunch of times and write all your media queries like this instead what would be nice is we can just take this and turn it into a variable and reuse it everywhere and that's the idea behind the at custom media property where you can define a custom media query and this will just be able to be used anywhere so we can say at custom media then we give it a name dash dash let's just say small and then we just Define what it is so in our case width greater than 400 pixels and then all you need to do is take that variable you've used and pass that in anywhere you have this in your media query so all the places you use that media query you would pass this in and that would give you your media query for this now actually this should probably be called Big instead of large or small but anyway there you go that's how this would work but of course there is no browser support at all for this right now this is currently in stage two so it's somewhat stable and you can use something like post CSS again like I've mentioned to use this live in your site and if you want to learn how you can do that with post CSS I actually have a full video on how to set up post CSS I'll link in the cards in description for you but unfortunately like I said this doesn't have any support right now but I'm really hoping since this has been in the spec for years that it'll get adopted by more browsers because I'm really looking forward to having something like this available now that right there is the last media query related thing I want to talk about in the next few are going to go pretty quickly because they're not too complicated the first and easiest way to do CSS styling without using a bunch of media queries is to just do different HTML for mobile and different HTML for desktop this is really only applicable if you have really complex Plex HTML that is drastically different on mobile and on desktop so like a really complex navigation that has a ton of features on desktop and a little bit simpler navigation on mobile that's also pretty complex then what you would do is you'd write all your HTML for one and you'd give it a class like mobile only and you would give your other one a class like desktop only and then you would just have a really simple media query that's like on the small screen sizes mobile only is going to be visible or I guess technically what we would do is on the large screen sizes we would say display none for mobile and then on these small screen sizes we would say display none for the desktop that's all you do so that's the simplest thing that you can do but in 99 of the cases you probably shouldn't do that because it's just extra HTML and extra problems that you can have this is why you want to use some of the tools built into the CSS that allow you to do responsive design without needing a bunch of media queries the first one I want to talk about is actually going to be CSS grid this is perfect for doing a bunch of responsive design so I'm going to come in here I'm just going to say dot grid whoops dot grid there we go I don't want to move the Box inside of there now I'm actually just going to copy down a bunch of different boxes there we go so now we have a bunch of different boxes inside our grid and you can see that they are on the right hand side of our screen I'm going to remove all of this code that we have except for our box and for our grid I'm just going to change the display here to grid now this won't change anything in our code but we can set up grid template columns and let's say that you wanted to have like three columns that are going to be all the same size so you could repeat three one fr and there you go now you have three equal sized columns now this is great but Azure screen size changes maybe you shrink it down you'll notice it doesn't look super great or as you grow it really large it doesn't look super great so one of the best things that you can do instead of hard coding a value here for the number you want to repeat you can make this automatic by saying it's either going to autofill or it's going to autofit and these both will automatically determine the number of columns you need to fit exactly the content you want and to determine the size of your element you can use a min max here where you give it a minimum and a maximum value so let's say at a minimum we want this to just be 200 pixels we never want it to be smaller than 200 pixels and then we can just say we want it to grow to be any size one FR so now if we give this a quick save and we'll just change the minimum here actually to 100 pixels all we need to do to get this to actually work properly is just give our grid grid a width of 100 because by default it's not taking up the full width of our body and we'll remove the margin from our body so we'll just say margin 0 here now you can see that all of our boxes are showing up right next to each other let's remove the margin from them and remove the hard-coded width so it'll be automatically determined by the actual container and then we'll just add some Gap into our grid we'll just say one REM there we go so now you can see we have our different boxes and no matter what size my screen is these boxes are going to grow and shrink in size until they cannot get any smaller and then it's going to move them to the next line or when it grows it's going to grow until it has room to put a new box on the line so you can see automatically the containers are determining how many boxes I can put on a row and this is all with just one single line of CSS now the difference between autofit and autofill is pretty minimal as you can see they look pretty much exactly the same but there is one difference in order to see that difference we actually need to remove some of the boxes because we this difference is only determined when the actual width of your container is large enough that you can fit everything in one row so you can see with autofill as I change the size of my screen every time we have space to add a new box or a new column it's adding that column as you can see our boxes are kind of pretending there's invisible boxes there while if we change this to auto fit instead you can see that now we're not adding additional columns beyond what the maximum number of contents we have so we have two boxes so we'll never have more than two columns that's why they're growing so large but with autofill our grid is currently having a bunch of columns right now like four or five different columns to fill the entire width of our container and that just makes sure all of your different elements even if there's only a few of them all never become too large now if we just take this back to what we had before with a bunch of different boxes another really important thing that you need to know about how you can use grid is the ability to do grid Auto for the rows and for the columns in our case we've defined our columns so we're going to make our rows automatic and we're going to say that they're going to be 100 pixels tall now we can remove the height from our box and that height is going to be determined by our Auto row right here so if we change this to like 200 pixels now you can see every single row that we add to our container is going to be 200 pixels tall or maybe 50 pixels tall and every time we add a new row automatically it's going to be that exact height of 50 pixels 200 pixels whatever you define this is again really important for a responsive design because we don't know how many rows we're going to have it's dependent upon how many different elements we have have as well as how wide or small our screen is so this allows us to take into account anything possible with how many elements we have and how large our screen is and make sure it looks exactly like we want again without any media queries at all now if you're unfamiliar with CSS grid I have a full video covered I'll link in the cards in the description so you can really deep dive into this concept now let's go back to when we just had exactly one box so let's just get rid of all these additional boxes we don't need our grid anymore and we can come in here and I want Redbox to have a width 200 pixels height 200 pixels there we go and we can get rid of all this grid code now one thing you're already probably super familiar with is the ability to do things like a Min width let's say we want the Min width here to be 100 pixels we'll do a Max width which we're going to set to 300 pixels and then you can specify an actual width which in our case we'll set to let's say 75 percent of our screen size so now what's going to happen is this box is going to be 75 of our screen size until it reaches the max width which in our case is 300 pixels let's make it a little bigger like 500. so you can see as we expand our screen once we get to the point where we're at that's 500 pixels the Box never gets bigger now when we shrink down our screen you can see that it stayed at 75 of the width of our screen until we reach our bandwidth which if we change this to something like 300 pixels we can see that a little bit better because as you can see here we're at 300 pixels and now the box is not shrinking down this is a really common use case for min max and normal width but you can only do this on a few properties which is why the clamp property is so useful the clamp property here what we can do is we can just say our width is going to be equal to that clamp and our clamp has a minimum value let's say 300 pixels an actual value which in our case is 75 and then we have a maximum value which in our case is going to be 500 pixels and this will do the exact same thing as those min max and values and so on so as we get our screen larger you can see once we hit 500 pixels it stops growing and if we shrink our screen down to one which we hit 300 pixels you can see again it stops shrinking down that's really important because now we can use this with not just wits but other things such as font size and this is really common you may change your font size based on your actual width of your screen so here you can set a width value like 1.5 VW and then you can set a maximum value for your font like let's say two REM and a minimum is going to be like 0.75 REM and now your font will always scale between these two values it will never be smaller or larger and as your screen size changes it's going to change the size of your font so we just add some font to our page we can just say lorem like 100 or something a ton of different font to our page right here as you can see when our page size changes our font size will change as well let's make this a little bit bigger so we'll do like 3.5 we'll make the maximum value like 10 and we'll make the minimum value 0.5 so we can really see how this changes in size and also let's make sure that we move our font size here into our body so now you can see as my screen size gets smaller my font size is shrinking down and as my screen size gets larger my font size is growing obviously this is way more drastic than you would want to use you would want to have a much closer maximum and minimum value and you would want to increase it maybe less than 3.5 VW but that gives you a concept of how this works and it's really useful for font size because you can scale off of things like your viewport units now the last concept I want to talk about I'm actually going to be using a YouTube video I've already recorded I'll have it linked up in the description and the comments for you but essentially I just want to talk about the different types of viewport units the new ones that are really useful for mobile because Azure Mobile screen changes in size like when you scroll on a page the URL bar May shrink on your mobile screen we have different viewports for handling that so we have normal Viewpoint units we have an S version which is like the small version so whenever that URL bar is showing that's what will be used as the height of your screen or width same thing with large that's going to be when that view is hidden and then we have a dynamic one that starts with d that is going to Scale based on the actual size of your viewport so if we play this video here you can see this gray bar will change in size as I scroll my phone because you can see that URL bar has disappeared while these other bars have stayed stationary because they're already defined as either the large or the small viewport like I said this is a pretty complex topic I have a full video covering it which I'll link in the cards and description for you if you want to go more in depth but it's important to understand these are here if you're doing a lot of really heavy mobile designs that are matter what the actual height of your screen is based on that URL bar being shown or not shown and that right there is about 10 different responsive design CSS Concepts if you enjoyed this video you're definitely going to love my videos on container query and those different viewport units those are going to be linked right over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 285,779

Keywords: webdevsimplified, responsive design, responsive css, css, css design, css responsive design, css tips, tops 10 css, css grid, css flexbox, css media queries, css media, css @media, @media, media queries

Id: TUD1AWZVgQ8

Length: 20min 15sec (1215 seconds)

Published: Sat Dec 31 2022