We’re going to talk about the Agility Skin 3 page layout because this is the fundamental building block of Agility. I have one of the cheat sheets open here. This is the Agility front page setup cheat sheet.
Horizontal and Vertical Areas
Agility is made up of big horizontal pieces that stretch from one side of the browser window to the other. In this case, this is the sort of typical page template here. It has the top header bar, it has the main header, the top menu area, the content area, the top footer area and the bottom footer area. And those each stretch all the way across the page.
Full Width Areas
So if we are looking at an actual page, this is your top header bar area. This is the main header area. This is the top menu area. Come down here from this side to this side and this space is the content area. Go down here and this is the top footer area and this is the bottom footer area.
Full Width vs Page Width Area
Inside of those areas is the page area. Let’s come back and look at our illustration here. The content area goes from one edge of the page to the other, whereas the content area page just goes the page width.
This is the top header bar page and this is the top header bar area. This is the top header area and this is the top header area page. So the area spans from the edge of browser window to the edge of browser window while the area page spans from one edge of the page to the other.
So if your page is 960 pixels wide, that’s what we said the width would be, then content area page is 960 pixels wide even though the browser maybe 1920 pixels wide. That’s the distinction that I want you to make between the area and the area page, that’s the terminology that I use elsewhere.
So when you see them overlaid on top of each other, you realize that the area page lies over the top of the area so that you can have a background style for the area and then another background style that covers it for the page. Say, for example, that you want a strong page demarcation. You can have that by giving your area page a background.
Typical Page Layout
Now if we come back over here to our front page, as I said this is the typical page, it has the top header bar, the main header area, the top menu area, a feature box area, a content area, a attention box area, a featured content area, a notice bar area, a social sharing area, then a top footer area and a bottom footer area.
Blog Page Layout
Let’s come back over to the News or the blog page. Again it has the same three areas for the menu. You’ve got a content area then the notice bar area, the social sharing area, the top center area and the bottom footer area.
Let’s look at one of our fluid grid templates, the full width fluid grid template. Again the three header areas, a content area, a social sharing area and the two footer area.
It’s important for you to understand that that’s the terminology. That’s how these pages are laid out and once we start looking at different sections to configure, that’s the terminology that we’re going to be using.