1.10 Media Queries

Welcome back to the course. In this lesson, you'll learn about a CSS library called MQ.scss. This is used for simplifying the creation of media queries with some very well thought-out mixins. So let's check it out. You can find the library at this address on GitHub. And we're gonna go ahead and load it via NPM. So I'm gonna open up CodeKit, and the name is MQ.scss. There we go. Let's install that. All right, now, let's go into our Sass file here. And we're gonna say import. And we'll go to node_modules/mq.scss, and we're going to load mq, just like that. Now I've prepared a very simple demo for you today. We have four dives with a class of container and each one has a different ID small, medium, medium, large, and large. Now, currently, we cannot see any of these because they all have a opacity of 0. Now what I'm gonna do is I'm gonna show these containers in their correct screen size. So, for example, the container with an ID of small, I only wanna show it on small screens that have under 480 pixels of width. And we can do that very easily with the MQ mixin. So here's what you do here. You specify if it's a minimum or a maximum, in my case I want it to be a maximum. And then you will specify the breakpoint. Now, the library doesn't have any predefined breakpoints. We need to do that yourself. So let's go ahead and do that right now. Breakpoints small, I'm gonna do 480. Breakpoint medium, I'm gonna do 800. And breakpoint large, I'm gonna do 1200. So right here, I wanna say BP-small, and I'm gonna say, opacity: 1. So what does this mixin do? Well, it generates a media query that looks like this, @media(max-width) 480px and then it's setting opacity 1 on the small element. So it goes from this to this. So now, if I, Go under 480, There it is, it tells me hey, you're now on a small screen. Let's do the same for the other ones, medium. This should be displayed on small to medium screens that are between 480 and 800. We can do that very easily, include mq, I can say inside two values, BP-small, BP-medium. It doesn't matter which order I choose. opacity: 1. So now, I'm on small to medium screens between 480 and 800. You'll see that when I resize this to 801, Yeah, my container disappears. What about the large one or the medium-large? Medium-large should be between 800 and 1200. And we'll do the same thing, @include mq inside BP-medium to BP-large. See how easy it is to create media queries with this tool? opacity: 1. So now we have medium to large screens. And for large screens, I can say @mq-min. And by the way, you can use min-width here as well, it works. Or here you can say, max-width. It's exactly the same thing. So here we're gonna say min, BP-large. And we're gonna set opacity to 1. So anything that's above 1200 pixels is now on large screens. So this is how you can use this Saas library to easily create media queries. Now, there are a lot more rules you can use. You can use min or max height, you can go for ratios. Everything is nicely documented on the official GitHub page for the library. You can see there are a lot of things we can do with media queries. What I showed you here is a very simple demo, but probably is the use case for most people. So I hope you found it useful. All right, and that's it for the media queries library, and also for this course. I've been using most of these libraries for a long time. And I can say with absolute certainty that, at least for me, they are essential. I want to thank you very much for watching this course. I'm Adi Purdilla, and until next time, take care.