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

2.6 Create a Complete Site Layout With One Grid

In this lesson we’re going to create an entire site layout, one you’ll see commonly across the web, using postcss-ant. The best part is we’ll only need one grid to achieve it.

2.6 Create a Complete Site Layout With One Grid

Hi. Welcome back to grids and layout tricks with postcss ed. We've covered all the basics so far and now we're gonna implement them into a really common side layout. One you've probably seen a number of times before. And we've already got our HTML set up, and we've also changed a little bit of the CSS here just to make it a little bit easier to see the layout that we're gonna produce. So before you move on, jump into your source files and grab yourself the HTML for this, and also this by CSS file. Now this lesson is not gonna take very long because we're only gonna need one grid in order to turn this content that you have on the right here into a complete site layer. So just going through really quickly. We've got the title here. This would be where you would have the title of your site. We've got a navigation menu here with a few links on it. We've got the site's main content. We've got a side bar or what will become a side bar. Then we've got three pieces of footer information, and the site main footer. So just a look at the HTML. We have just the main element wrapping the whole thing, we've got head element and nav element, so that's this and this. We've got a section for the main site content here, we've got an aside for the sidebar. We have three more asides for these three here. And then we've got a footer element at the bottom for this one. All right. So now, let's look at the CSS that we need to run. So start by adding generate grid, which we're gonna abbreviate to gg. Then inside that, we're gonna add our columns method. And now, all we need to do is create a size set for each row that we wanna have in our layout. So the way we're gonna split up, is these first two elements here are gonna make up the first row. Then the content in the side bar will make up the next row. Our three extra footer cells here, will make up the next row. And then our footer will make up the final row. So, let's add those in. For a total, we wanna have just enough room to wrap the word that we have here. So, 10rem should be enough. And then we don't know how wide these nav items are gonna be. They might change. So we're gonna add auto to allow for that. We just want those to fit around our title. So that's our first sized set, and that's gonna create our first row. Next up, we wanna have our content on the left and our sidebar on the right. And we're just gonna go with a fairly traditional layout for this where the content is wide and the side bar is narrow. So let's just go with 3/5 for the content, and 2/5 for the side bar. So now that's our second row sorted out. So add a comma, now we'll get ready for the next size. Underneath here, we've got our three footer elements here. And we could just split those into thirds, but let's go with something a little different. Let's have the first one be auto. Then we'll have the second one take up 1/2 of the available width. And then we'll have the last one set to auto as well. Now we have only one more row to take care of and that's our main footer and we just want that to fill up the whole width of our site. So to make that happen, all we have to enter is auto. And now, with just that generate grid card, this is gonna turn into a complete site layout. All right. So there we go. Obviously we've just got a placeholder styling on here. But all you would need to do is add the content that you want for your site into each one of these cells, and your layout is complete and ready to go. There's thousands, upon thousands, upon thousands of blog templates and one page templates with the exact same layer is here. The title or a logo over on the left with the nav bar on the right, large content area smallest sidebar, a three putt footer, and then a full width main footer. So that is all it takes to make a complete site layout using postcss-ant. So that wraps up the last of our basics videos and we're ready to move on into some of the more advanced techniques. We're gonna go through four different lessons on using some of the really cool and interesting and more unique features of Ant. And in the next lesson, we're gonna kick off with a means of creating column widths that we haven't covered yet. One that is really powerful and really useful that you won't find tackled in this way anywhere else other than Ant. And that is using ratio based sizing with Ants in-built ratio method. So you gotta learn how to use that in the next lesson. I'll see you there.

Back to the top