Now that we’ve done an overview of the Agility Skin for Thesis 2, let’s take a look at just how an Agility page is laid out. This is especially useful for you to understand at the very beginning.
Agility’s Layout has a Grid System
Essentially Agility has this grid system with every Agility template and every Agility page being laid out in a grid format. That grid format is composed of both horizontal divisions and vertical divisions.
5 Primary Horizontal Divisions
Agility has 5 main horizontal divisions that I call “Areas”. These horizontal divisions span the entire width of the browser window which allows you to put a style in them that spans the whole width of the browser window.
“Areas” in HTML Skin Editor
Each primary horizontal division contains one primary vertical division which is the thing that gives the page its width. The primary horizontal divisions, I call “Areas” so if you are looking at the HTML in your skin editor, you see a header area, top menu area, content area, top footer area and bottom footer area. These are those areas.
Primary Vertical Divisions
Inside of each of those areas is the primary vertical division called “Area Page”. So that’s header area page, top menu area page, content area page, top footer area page and bottom footer area page.
That’s what produces the definition of the width of the page and each one of those area pages are inside of their respective area. So this primary vertical division is called an “Area Page” and that area page is centered in the browser window.
Secondary Vertical Divisions aka Columns
Each typical primary vertical division contains one or more secondary vertical divisions which I refer to as “Columns”.
This is the header area and in it you’ve got a header area page. Inside the header area page there is a header with 2 columns, a one-thirds width column and a two-thirds width column.
If we look inside of a content area, it’s got 2 columns. A two-thirds column and a one-third column. If you look inside the skin editor and we open up say the content area page, you can see we’ve got a main content column and a main sidebar. Those are the two columns that sit inside of the content area page.
Every piece of Agility is built that way. So it’s got the header area, header area page, header, column 1, 2, 3, 4 or column 1, 2. They’re all that way.
Column Widths are a Percentage of Page Width
The column widths are set up as a percentage of the width of the page so by default, the left header column is one-third of the width of the page and the right column is two-thirds.
By default the main content column is two-thirds of the width of the page and the sidebar is one-third. By default the footer widgets are each one-quarter of the width of the page and then the bottom footer is divided into 2 columns that are half of the width of the page.
So we’ve got these column widths that are one-quarter, one-third, one-half, two-thirds, three-quarters and full column. The combination of each of these columns has to always equal 1. So if you’re messing around with the columns, you can’t have a two-thirds column and a half column, it’s not going to render correctly.
Can the Page Width be Changed?
Shawn asked, “Can the width of the page be changed?” No, it cannot. These are specifically designed to be essentially fixed widths. They’re not actually fixed with, they’re flexible width. If you’re going to write your own CSS, yes you could customize all this but it’s a lot of CSS you’d have to write.
If you look at the third Agility seminar, Customizing Templates in Agility, you’ll learn why the widths are not definable beyond one-third and two-thirds and the benefits of having that system in place.
Each primary vertical divisions is called the “Area Page”, it’s centered on the browser window and the page width is 1032 pixels wide, that’s how wide that is.
What Makes Up the Column Widths?
The column widths are made up of content space plus padding. So if we look at this two-thirds column here, it’s got 13 pixels of padding on one side, the column itself is 647 pixels wide and the interior padding is 26 pixels wide which ultimately creates the two-third width column.
However, what you’re going to think about it is the two-thirds column is 647 pixels wide. You don’t have to worry about the padding because the padding is managed by itself but when you’re thinking about how wide your content area is, it’s 647 pixels.
The same thing is true with the sidebar. You’ve got 13 pixels of padding on either side of it and the sidebar itself is 320 pixels which equals a one-third column.
Add those all together and you’ve got 1032 pixels. So your column widths look like this. A full column is 980 pixels wide with 52 pixels of padding, 26 on either side. A one-quarter column is 232 pixels wide and 13 pixels of padding on either side. A one-third column is 320 pixels wide with 13 pixels on either side, a half column is 490. A two-thirds column is 647 and a three-quarter column is 735.
That’s how wide everything is and you can find this information in the cheat sheets. That’s an overview of how the pages are laid out and all the pieces of the pages.