3.2 Responsive Media Queries
Our grids so far have already been designed to fluidly resize, but typically you also need to make additional adjustments at various viewport widths in order to create a fully responsive layout.
In this lesson, learn how to use media queries with postcss-ant to adjust your grid-based layouts.
1.Introduction1 lesson, 00:56
2.Postcss-Ant Basics6 lessons, 34:52
3.Postcss-Ant Techniques4 lessons, 34:45
4.Conclusion1 lesson, 00:59
3.2 Responsive Media Queries
Hey, welcome back to Grids and Layout Tricks with postcss-ant. In this lesson, we're going to look at some techniques that you can use in combination with media queries when you're creating a responsive layout view aside. So, we're still gonna be working with the style.scss file. In this lesson, we've just got a blank one except for just add default regular styling code. There is also an index.html file with just a little bit of code in it. And you can get both of these syncs in the source files that have come along with your access to this course. So what we're gonna do is have a routine set up so that we were at full width, we have two columns. We have the secondary column on the left and the main column on the right. And then when we're in between, we're going to have the order of those things swapped, so the main column is on the left and the secondary column is on the right. And then at the smallest width, we're going to have them stacked just like they are now. We're also going to change the size of the gutters depending on the size of the viewport, so that they're larger when the viewport is larger and smaller when the viewport is also smaller. All right, so the first thing that we're going to do is define these two gutter sizes, and we're gonna use a variable for each one. So we're gonna add in gutters_large, And we'll set that to 2rem. And we're gonna add in gutters_small, And we'll set that to 1rem. And then the class that we're using here is responsive. So we're gonna target that class. And then before we get in to actually working with grids, we're just gonna add a little bit of spacing in between these two elements while the stacked on top of each other, so we'll just target the main and the side elements. And we'll give them a margin-bottom setting of gutters_small. We'll need a smaller gutter size here because we're only gonna have these two elements stacked on top of each other when the viewport is at a small size. Next up we're gonna create a media query that kicks in, once we're at at least a thousand pixels inwards for our viewport. So we're adding our media query, and we'll set it to go off at a min-width of a thousand pixels and then in here, we're gonna generate a grid with gg:, set up a columns. We want our first column, that is our main column to be three quarters of the available width, and we want our second column to be one quarter. Then we're gonna set up our gutters. And because this is gonna be a larger version of our layout, we're going to use our gutters_large value. Now, that is gonna kick in at a thousand pixels. So there we go. That is our two column layout but what we want to do at this width is swap these two over. We're gonna put this secondary column over on the left and we're gonna put this main column over on the right. To do that, we're gonna target both our side. And our main elements, and we're gonna set them both to position: relative. So we can control exactly where they appear in this layout. So first, we're gonna position our side, and that is this column here and what we're gonna do is position it relative to the right side about layout and we're going to push it three quarters of the way over to the left by doing that, by making a space three quarter with here, to push our secondary column over, that's how we are gonna get it on to this side of our layout. So we'll say right, and now this is where we're going to use a couple of methods that are operating on a layer underneath the grid generation methods that you've been using so far and now sizes, pluck and bump. The first one is sizes. And we're going to specify 3/4. Now I'll give you some docs to read into Into the sizes method a bit more closely, but basically what the sizes method allows you to do is to grab a size and apply it to your layout without having to use the grid generation method at all. So you still get all the benefits with the sizes figured out as a portion of the overall width, but allows you to extract the information and use it in a different way, now sizes can accept multiple values. So in order to let postcss-ant know which value you want, you need to use the pluck method. Now if there were multiple values that were passing through sizes here. Let's say there were four values and you wanted to get the fourth, then you would say pluck 4. In this case really passing one value but we still need to use this pluck method. And we're gonna say pluck one. So we can get that one value. Now let's look at what we've got so far. Right, so there is a secondary column is being pushed almost all the way and from the right. But you can see that we've still got a little gap here and that's because it still thinks that this column belongs over here on this side. Hence it still thinks that it needs a gap on its left side. That's why we have this little space here. To rectify that, what we can do is use the bump method. You can use the bump method in situations like this where your alignment is almost there, but not quite right. So we're gonna say bump and then we're gonna pass gutters_large, because that's the size of the gutters that we're using in this grid. Now our secondary column is perfectly positioned. Now all we have to do is move the main column over as well. So we just copy the code that we used here, paste it, and we'll switch this over to left so offsetting it from the left side instead. And we only need to move this one over by a quarter of the available width. And everything else can just stay the same. So, there we go. Now we've got our swapped over columns. And if we shrink this down, when we drop below 1,000, you can see that they change their order again. Now we're going to have an in between stage where we have a two column swept back again. But we don't have them stacked on top of each other. So for that we're gonna create another media query. And was this one to a minimum width of 700 pixels. We're gonna generate another grid and because we have this nested inside a responsive clause it's automatically going to apply to these elements. So we're going to say columns and because we're going to be at a small width. We cannot change the width of these columns as well, so that work better for the amount of size that they have. So now we're going to have the main column be two thirds and the secondary column be one third and we're also going to reduce the size back out and seeing as we don't have as much space. We're gonna use our gutter a small variable. So, now when we expand our viewpoint width. We've got out two columns here, with a smaller gutter with the main on the left and the second row on the right. And we keep going out they swap sides and the gutter gets bigger. Now just to make it a little bit easier to see those gutters I'm just going to repeat these two elements. So it's a bit more prominent. So you can see the size of the gutter is there and then when we get bigger. The gutters increases size as well. So that gives you an example of how you can use the gutter generation processes of into adjust your layout with fairly minimal amounts of syntax for immediate query and and how you can do things like controlling the order of different elements in your layout by using the sizes pluck and bump methods even when you're working outside of grid generation directly. Next up, we're gonna look at something a little bit interesting. If you've been around the web design traps for a little while then you've probably heard about this thing called the Holy Grail layout. As probably a little bit of an over dramatic title this point in time but it's a particular layout that's been kind of looked at as the yardstick of layout control mechanisms for quite a while now. As every different new method has come along for controlling layout. One of the first things that people do is test to see if you can make the holy grail layout with it and how easy is this to do so. We're going to go through how you can use C.S.S. and to create the Holy Grail layout and we're going to do that in the next lesson, I'll see you there