Responsive Structures in Agility
The BYOB Agility Skin is intended to create a very easy system for you to build a site that is responsive. One of the problems with building responsive is making the things you build responsive; making HTML structures respond to the page layout, making things move around correctly or stay a fixed sized or change sizes.
If you create your own structural elements in a skin, you have to give it rules to make it responsive. So when I designed Agility, I designed and created it specifically so you wouldn’t have to do that you could set a couple of settings and the structures would respond properly regardless of anything else.
Agility’s Grid Layout
The reason that works is because Agility is laid out in a series of grids or in a grid that has horizontal divisions and vertical divisions. And you can kind of see the various kinds of grids here. This is one style of grid where you’ve got 1/3 of a column width on the left and a 2/3 column width on the right. This is a full column width grid element. This is 2/3 column on the left and 1/3 column on the right. These are ¼ column elements and these are ½ column elements.
These are all different grids and this is made up of a combination of horizontal divisions and vertical divisions. The primary division is horizontal and a typical page has 5 horizontal divisions called areas. If you download my Agility Nude HTML cheat sheet, you will see that illustrated. The cheat sheet can be found in the lesson resources on the lesson page.
Let’s come over to the Thesis Skin Editor and look at a regular page for the moment. We have 5 main horizontal divisions – our header area, our top menu area, our content area, our top footer area and our bottom footer area. These are the areas. They are the main horizontal divisions and they span from one edge of your browser window to the other. They span the entire width of the browser period. There’s no place on the browser window on either the left or the right that the area does not expand to fill.
Let’s look at our actual site here for a moment, the header area spans this entire dimension here, right? This is our header area. This is our top menu area. Again, it spans from left to right all the way across. Our content area spans from left to right all the way across and so on and so forth. Those are the primary horizontal divisions.
Agility Nude HTML Cheat Sheet
Let’s open up the cheat sheet, go to the Lesson 7 page and the cheat sheet is Download Agility Nude HTML cheat sheet. Here it is and here’s a little illustration of those 5 primary horizontal areas. The header area, the top menu area, the content area, the top footer area and the bottom footer area. So you got the primary horizontal division spans the entire width and they’re called areas.
Primary Vertical Division within Horizontal Divisions
Now each primary horizontal division contains one primary vertical division. And that primary vertical division is called area page and it is centered in the browser window. So you’ve got these horizontal areas that are demarcated by these black horizontal lines. Each one of them has a primary vertical area inside of it that is demarcated by the vertical blue line.
So this is the header area and this, from here to here, is a header area page. And that is centered inside of your browser window. So the header area page here starts somewhere here and ends somewhere here. In fact, I think we can just illustrate that a little bit.
Here’s our header area and here’s our header area page. Here’s our top menu area and here’s our top menu area page. It’s how that works. Each primary horizontal division has one primary vertical division.
And when you look at this inside of the Skin Editor, the HTML part of the Skin Editor, you can see that each one of those things contains a page. Each one of these contains… header area contains header area. Top menu area contains top menu area page. Alright, got that? Horizontal areas, each one has a vertical area.
Secondary Vertical Divisions
Typically, each primary vertical division contains one or more secondary vertical divisions that are called columns. So you’re going to see this concept of columns over and over and over again. We’re going to talk about columns plenty of times. And the columns are demarcated by these red lines.
So this is 2 columns, this is 2 columns, this is 4 columns, this is 2 columns. The top nav menu area is one of those places that’s not divided up into columns but that’s why I said typical primary vertical divisions containing one or more secondary vertical divisions. They don’t all have it but the typical ones do.
Standardized Column Widths
And those column widths are standardized. They have very specific standard widths. They come in ¼ page width so here’s 4 columns. Each of them is ¼ of the width of the page. They come in 1/3 page width, that are these ones here. They are 1/3 of the width of the page.
There’s the half page width which are these 2 down here. There’s the 2/3 page width which are these tow. There’s a ¾ page width which I don’t have illustrated and there’s a full page width which I don’t have illustrated here. But you get the idea, right? Our column widths, they are really only 1, 2, 3, 4, 5, 6 potential column widths in Agility.
So if you thought you would create a page where you had you know, 500 pixels, 110 pixels and 270 pixels for column widths, that’s not going to work in Agility. Agility works with these uniform sizes and that’s what makes it able to respond easily. It’s not that you can’t make odd dimensions yourself but they’re not going to automatically respond if you do so.
While this may not need to be said, I’ll just point it out anyway. The combination of columns of those secondary vertical columns, always has to equal 1. So you can’t have just a 2/3 columns. You’ll end up with a 2/3 columns and a 1/3 column. And you can’t have two 2/3 columns, right? If you’ve got a one 2/3 column, its partner is going to have to be 1/3. The combination of all of the columns needs to add up to 1 so 4 ¼ columns, 2 ½ columns, so on and so forth.
Alison asked whether or not this is typical of all Thesis templates and the answer is no. This is typical of Agility. The great power of Thesis is that it exposes the HTML layout to the designer. It used to be that Thesis only came in a few different layouts and you got to pick one of those layouts and that was all there was to it. However, with Thesis 2, you can create any kind of layout you want and the layout I’m describing for you right now is the layout that exists inside of Agility. And it exists specifically in Agility so that when you put something there, it’s going to be responsive.
As I said, those primary vertical divisions are called area page. They’re centered in the browser window and just so that you understand this, they are 1032 pixels wide. That’s how wide your page is. Your page is 1032 pixels wide.
So when you think about your column widths, columns are made up of content space plus padding. If you didn’t have padding, everything would run in together. So you’ve got a combination of content space plus padding and the way this works is for example, a 2/3 column is 12 pixels of left padding, 640 pixels of content space and 12 pixels of right padding.
The 1/3 column width is 12 pixels of padding, 320 pixels of content space and 12 pixels of padding. The way this always works is on the edge, there’s always 12 pixels of padding and in between columns, there’s always 24. That’s how this works.
And so in terms of your column widths, a full column is 1008 pixels wide plus 24 pixels of padding, 12 on each side. A ¼ column is 234 plus 24, a 1/3 column is 320 plus 24, a ½ column is 492 plus 24. A 2/3 column is 640 plus 24 and a ¾ column is 750 plus 24. These are the typical dimensions.
The reason I’m telling you this is because in a minute, we’re going to start talking about header images. And if you’re using either of my smart header configurations, the header images are going to fit inside of one of these column widths. So it’s useful to know what those column widths want to be.
That is the Agility Grid System and all of your pages are going to end up being laid out according to that Agility Grid.