Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding boilerplates, grids, and frameworks
- Choosing a framework
- Building your own framework
- Crafting a deployment strategy
- Modifying files
- Customizing typography and color
- Filling in framework gaps
- Exploring grid-based syntax
- Nesting grids
- Using mobile grids
Skill Level Beginner
I have always felt that the best way to learn something is just to dive in and do it. With that in mind, let's explore typical grid- based syntax by crafting a basic page layout. We're going to be working with the Foundation grid simply because we have already been working with the framework, and we're kind of familiar with how it works. Every single grid system is going to be slightly different in terms of its syntax, but the basic concepts are the same. So if you learn how to use one grid, moving to a different grid and working with it is typically just learning about its class structure and how it needs to structure elements on the page as well.
So I'm here at the documentation for Foundation, and I'm looking at the grid documentation. Again, some of the basics are it's a 12-column nestable grid. It says if you are familiar with grid systems, you're going to feel right at home, but if you have never used one before, let's take a look at how we use it. A grid is built around two key elements, you have rows, and then you have columns. What a row does for you is it creates a section of content that's a row. You can think of it like a table, as a matter of fact. It creates a max-width container, which means it's going to stretch to fill its parent, whether that be the body tag or another section that you're inside of, and that is going to be used to contain the columns.
At that point, you take the contents of the row, and you assign a number of columns to it by using classes to tell it how far over to span. To just kind of show you how this works, I am going to go right down here to this example. So this would be one row, and inside that row you'd have three div tags, each of those div tags would have the class columns applied to it and then four, so it'd have two classes applied to it. And if we look at the code for that, you can see exactly what I'm talking about. So in this div with a class of row that establishes the first row.
Then you have three separate divs and each one of those divs have the class four columns. So span columns, how many? Four. And most grid syntax works in a very similar fashion. So there is a lot more to the grids inside Foundation as well as most individual grid systems. For example, it talks about how to Nest grids, so you can build more complex layouts. It talks about doing Offsets so that if you don't want everything aligned up against the left edge of the page, how do you push content over? Talks about how to create Centered Columns using that syntax, how to control Source Ordering, so if you want something on the bottom of the page to show up, up top, how do you do that? How to use the Mobile grid.
So there's a lot of information here in the documentation in terms of exactly how to structure these things and which classes to use. Now I am going to jump into our example, which in this case is the layout.htm. I can see that there's a not a lot going on here. In terms of actual page layout, we have a navigation bar up top, then we have a heading, and then we just have some sections of content, and right now it's doing exactly what the framework is telling it to do, which is to stack one right on top of each other and be 100% of the page itself. So now we need to start putting our grid in place.
If I go back into my file, and I start scrolling down, I can see that inside the body of the page I have a header. Inside that header I have my navigation and then after the navigation I have h1 which is Exploring grid Syntax. Then I have a main content which is this article with a class of main. After that I have an aside which is a sidebar of related content. After that I have two additional articles, one for monthly specials, and one for upcoming events, and then finally I have the page footer. So we're going to go ahead and create sort of a two-column layout based on that.
So the first thing that I want to do is I want to take all of the page content and wrap it in a wrapper element. A lot of times I'll see people when they use these grids, use the body tag as the initial containing row, and there's nothing wrong with that. But the Foundation grid actually recommends that you use kind of a wrapper. So I'm wrapping everything inside the body tag, inside of a div tag, and I am giving it a class of row. So now if I Save that and go and preview my page, I can see that something has changed here.
So now because the entire page is wrapped in this row, the margins that apply to my grid have been applied here, and it's longer taking up the full length of this. One of the things that you'll need to realize is if you want content to appear beside each other, it needs to be a part of the same row. So this article where it says this is the main content, and then the related news, that's my sidebar. If I wanted those two to appear side by side in a two-column layout, they both need to be wrapped inside of a row. So if I go back into my page, I can scroll down and find that main article, I am going to go ahead and highlight that, and then I am also going to highlight the sidebar which is that aside, so I am going to highlight all of that.
I am going to wrap this in another div tag, and I am going to give this div a class of row as well. So essentially, I am now creating another row inside of our content. All of the remaining content on the page which are those other two articles, I want to go ahead and wrap them in a row as well. So I am going to highlight all of those, wrap them in a div tag, give that a class of row, and I'll save that. You'll notice that I am not wrapping the header or footer in a row.
And that's basically because they're already a row. They are going to stretch to fit the width of their parent. I don't need to worry about changing the width of the elements inside of that. So all I really am doing right there is just establishing where the rows in my content is going to be. Now this is quite helpful if you are already planning the layout, you guys are just sort of doing this based off what I'm telling you. This is pretty much the way that I handle working with grid systems. I'll go ahead and establish all of the rows that I need and then I go in and start assigning widths to the various elements. So the first thing I am going to do is I am going to go up to the main article, because it's kind of the first thing that I have found within a row, and in addition to the class of main, I am going to apply some column counts to this.
So what I am going to do is I am going to do nine columns. Now it doesn't matter which order you do that in. You could say columns space nine or nine space columns. I like working with this way because it reads right. Remember, our grid layout is based on 12 columns, so this is going to take nine columns up, which means for our sidebar, and I was an Art major, so I don't do a lot of math, but I am good enough to know that that is actually going to leave me with three columns. So if I Save this and go back to my page and Refresh this, you can see the Main Content in my sidebar now appearing as a two-column layout, and it really was just that simple, I didn't need to do anything other than that.
I defined a row that has both of these in it, and then I told the Main Content to span nine columns. I told the sidebar to span three columns. That was incredibly simple to do. Well, now I have these two down here, Monthly specials and Upcoming events, so I am going to go back into my code, scroll down, and for these guys I am just going to take each of the articles here, and I am going to apply a class to the article, and for this one I am going to do six columns. And for the next article down here, since there is only two of them, we're going to go ahead and do six columns there as well.
So if I save this, preview it, you can see that now those guys are spanning exactly half of the layout, six columns here and six columns here. Since the Foundation framework is responsive and these are based off of percentages rather than fixed widths, you'll notice that as I begin to expand and contract my page, those areas are getting bigger and larger as well. So one of the things you want to do is you want to make sure that you're targeting them for specific page sizes and make sure that the values that you have given it work all the way down to the smallest breakpoint you have in your pages.
Occasionally, you're going to work with something more complicated than a two-column layout. So, for example, if I go back into my code, and I take let's say that instead of encasing these in separate rows, I encase it in one. So I am going to remove the closing div tag from the aside and then remove this div tag with a class of row above my two separate columns. So now, essentially we have one row, we have a row for the article in the aside, and then a row for these two articles that fit within each other. Right now this isn't going to work, because they don't add up to 12. I have six, I have six, I have four, I have nine, and I have three, and that means that overall we're looking at 24 columns rather than 12, so if I save this and test it, you can see nothing really happens.
What's going on here is it's stacking these columns. It's saying, okay, I can go nine columns this way, I can go three columns, but I'm done. So then it takes the content and it just stacks it. So actually, it doesn't look like we have made any change to our layout at all, but we have. The problem with this--and you might just say, well, then why do I need to bother wrapping every single thing in rows? Why can't I just do this? Well, it has everything to do with screen size, because the moment it can break these up, it will. So you want to be really careful about stacking these things, because it can lead to some unintended side effects.
Now, what if I went to each one of these, however, since I have four of them now? What if I told each of them to span four columns? So the main content, the aside, and then both of the related articles down below, if I told each one of these to be four columns. So if I Save this and preview it, now you can see that we get four columns here, four columns here, and four columns here. The extra element that doesn't have enough room over here is just going to keep stacking below it, so in essence I have created a three-column layout by doing four and four, knowing this one is going to stack underneath it.
Now, you can play around with these any way that you want. Have some fun and start experimenting. What happens if I say, for example, I have got four and four, which is eight, which gives me four left over, what if I made this one two columns and this one two columns? Would I get a four-column layout? So if I save that and preview it, yes, I do. I do get a four-column layout, but it's kind of hard to read, but I get a four-column layout. So I can really start experimenting around with this. I can experiment with defining where rows begin and rows end, how many columns something stretches, I can push columns over to the left, I can pull them over to the right, I can center columns using the styles, there is a lot you can do here. So I want you to just take this exercise.
Take a minute, go out to the Foundation's website, look through their documentation, read up about how the grid structure works, and knowing this very simple syntax, I want you to just experiment, see what you can create with this particular page, see how many different variations you can get on this layout just by changing some of the class attributes. And in doing that, you're going to get a little bit more familiar with the Foundation grid Syntax. Now, I know we're using the Foundation grid here and its syntax, but really the syntax which you are going to use here is very similar to what you will find in most frameworks and grid systems. Once you are comfortable using one grid, it's usually quite easy to make the transition to another, so be sure to experiment with as many as possible to see which one best fits your design philosophy.