Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:1.2 hours
Grid 3
  • Overview
  • Transcript

2.5 Gutters, Nesting, and Global and Local Settings

Without you having to do anything, postcss-ant will handle creating gutters in your grid, between both columns and rows. However, you also have the ability to control and modify them with global and local settings. The latter, local settings, are particularly useful when using nested grids. Learn about all these things in this lesson.

Related Links

2.5 Gutters, Nesting, and Global and Local Settings

Hey, welcome back to Grids and Layout Tricks with postcss-ant. In this lesson, we're gonna be talking about a few things. We're gonna be talking about guidance and how you can control them. We're also gonna be talking a little bit about nesting grids one inside of the other and then as well as settings you can use control gutters. We'll have a little bit of a look at the other settings in ant and how they work on both a global and a local level. Okay, so let's start with a closer look at gutters. You have seen one technique already and that is where we add gutter and then we specify a new value. So this is 30px by default. Our gutters that you have on the screen right now. But if you want, we can change that to something else. So, let's say 20px. So you can see those gutters have shrunk down. We've just entered one value here but you can also add a comma and then add another value. If you do this, then the first value is gonna be the gaps in between your columns. And the second value is gonna be the gaps in between your rows. So there, you can see that we have increased the space on our horizontal gutters, while the vertical gutters have remained the same. So, what we're doing here is setting a local setting. We are overwriting ant's defaults, just for this class only. You can also set global settings to overwrite those defaults, and those new settings will affect your whole stylesheet. So let's get rid of this local setting for now. Go back to that 30px default on both horizontal and vertical gutters. Now up here, what we're gonna do is add @ant-, and then just the name of the setting. In this case, it's gutters. Now just note that here it needs to be gutters plural, not gutter singular. Then all we need to do is specify our new gutters setting. So we can add that as 20px. And that affects our whole stylesheet. And then just like we did with our local setting, we can also add a comma and add a second value. So that we have the first value affecting the vertical and the second value affecting the horizontal gutters. So there we go, just like before, only now every other grid will also have those same gutters. So that gutter setting is just one of the global settings that are available in ant. And that's probably the only one that you're going to need to use for most projects. But there are also others. I'll provide a link to the docs where you can read about each of these other settings. But they include things like @ant-support, which lets you switch from using Flexbox for your grids to using float if you need to support older browsers. @ant-technique, which allows you to change over from using ant to handle your grids to negative margin. There are pros and cons of both of those things. So I suggest having a bit of a read of the docs for @ant-technique. You have @ant-children, which allows you to switch from using ant-child to ant of type if you prefer. And then there's also @ant-rounders. And generally speaking, you're probably gonna wanna leave ant-rounders alone. Because if you change that, you're altering the way that you grid is gonna work with sub-pixel rounding. So if don't know exactly what sub-pixel rounding is and how to deal with it, it's probably best to just leave that alone. And then there is also @ant-namespace which you're probably not going to have to use. But if you do have some type of collision with the functions from another pre-processor, then you can define a namespace for all of your ant functions. So for example, we might say @ant-namespace is ant-. Now, when we wanna generate our grid or use any of the methods, we would need to preface them With ant-. But as I said, generally you won't need to use that unless a problem comes up that you have to deal with. And just a little note, if you do change your namespace while you're working on something and then you change it again or you change it back, you just need to stop your gulp server, restart it And then it will all go back to normal. So that's all of the different global settings that you can use. And just like you saw with gutters, you can set any of these both globally and locally, that is with the exception of namespace. Namespace is a global setting only. But if you have one grid and you just need that one grid to use floats instead of Flexbox for example, then you just add that setting inside your generate grid method and it'll apply to that grid only. And by the way, you might have also noticed here that instead of using generate grid, we're just using gg. And that's an alias for generate grid just to give you a bit of a shortcut that you can use when you're creating a lot of grids and you just wanna speed up your typing processes. Now let's take a closer look at the grid that we have here. You've probably noticed that this is not the same grid that we've had in the past few lessons. What we have here is a grid nested inside another grid. Now the reason that I wanted to point out the ability to nest grids one inside the other is because there's pretty much only one thing the ant can't do. And there's actually no grid system other than the upcoming CSS grid spec that can handle this, and that is 2D grids. Or another way of putting that, is enabling rowspan in your grids. If you've ever worked with tables, you've probably seen that they have the ability to create one cell that spans multiple rows. So, for example, on our grid here, you have the cells marked 2 and 3, and they are currently spanning the four rows that you can see here labeled 1A, 1B, 1C and 1D. When grid spec comes out, you're gonna be able to tell specific cells how many rows they should span. And incidentally, you're gonna be able to use postcss-ant alongside CSS grid when it is ready and when it is widely supported. But for now, if you wanna create this type of effect, you need to nest grids one inside the other. And that's what we've done here. So if we look in our HTML, we have a regular grid, a parent grid here. And then inside the first cell of the grid, we have another grid nested, and it has four cells of its own. So that is how you achieve rowspan or 2D grids using postcss-ant until CSS grid comes along. Now the other reason that I wanted to show you this nested grid is to give you an example of where these local settings can come in really handy. Right now, we don't have any CSS applied to our nested grid here, but we've got a little styling here that I put together earlier. So I'm just gonna uncomment that. And what we we wanna achieve here is a two by two grid. So we've got our columns set to be 1/2 of the available width of each, and our rows set to be 100px in height, which is half that of the parent cell. So, let's see what we get. Okay, now here, because we're inheriting our gutter distances from the global setting, it makes things look a little funky. So what we can do is overwrite those global settings with a local setting. So we're gonna say, gutter, you can actually use gutters plural here as well. And this time, we're just gonna set those gutters to 0. All right, so now that zeroed out our gutters, and we've got our exact two by two grid. So that's just one example of how you can use local settings, which is particularly helpful when you're working with nested grids. Now that covers pretty much everything that you need to know about the basics of working with ant. And you can take those building blocks and you can start to make just about any type of layout that you want with it. And to demonstrate that, we're gonna go through and we're gonna create a really common website layout. One that you will have seen plenty of times before. And we're gonna do it with just one grid. And that's what we'll be covering in the next lesson. I'll see you there.

Back to the top