The next thing I want to show you in the Agility Skin for Thesis 2 is responsive columns system. I’m going to give you an overview of it here but I do have an in depth video tutorial on how to use the column system in detail in the seminar Customizing the Agility Skin Templates.
3 Parts of the Agility Columns System
The Agility columns system consists of 3 parts. It consists of the column wrapper, columns and then in some cases reverse wrapper and Agility is actually entirely constructed using that system.
Specifying the Column Configuration
You can see it in play here where the typical 2 column content is an Agility column wrapper and in that Agility column wrapper, you have the ability to specify the configuration of this set of columns. In this case, it’s configured as 2 columns with two-thirds and one-third.
You could configure it three-quarters and one-quarter. If we do that then you have 2 columns, here’s Agility column, you have a 1 column for each column. Here’s the other Agility column and the Agility columns need to match in configuration what the box itself said. For example here we would set it at three-quarters width and this is the one that’s one-quarter width.
So we gave the configuration here first as 2 columns three-quarters, one-quarter and then in our first column, we set it to be three-quarters and our second column we set it to be one-quarter. Now if we save the template and refresh it, the template has been reset and your content area is bigger and your column is smaller.
Retaining Its Responsive Nature
So this is the way in which you have control over the widths of columns and still be certain that it’s responsive. You probably already know that you can easily create columns out of HTML boxes to your heart’s content but you end up having to write your own responsive code. In this case, as long as you use my system it’s always going to be responsive. The columns will always just work properly.
How to Adjust Padding
Now, another thing that you can do with them is you can adjust padding. Sometimes you don’t want top and bottom padding around this column wrapper and if that’s the case, all you have to do is click, either remove top or remove bottom padding.
The same thing is true for interior columns, you can remove left and right padding and all you have to do is just click those and it will remove that padding. So you have some things that you can manage this way by simply checking these boxes.
Bottom Footer Configuration
Let’s take this back to its original configuration so it’s one-third and two-thirds and the overall is 2 columns two-thirds, one-third. Save it and it goes back to our configuration.
Well, the bottom footer is built the same way. If you open up the bottom footer, we’ve got the bottom footer area, bottom footer area page as we talked about. Then we’ve got bottom footer area columns which is a column wrapper that says 2 columns equally sized. When we open that up, you see column 1 and column 2. Column 1 is half the width of the content column and column 2 is half the width of the content column.
Ways to Manipulate the Agility Layout
All of Agility really is built using this system and you can use it to manipulate the layout of Agility in any number of ways. You can add as many areas to Agility as you want or to your particular version of Agility.
You can have as many sets of columns configured as you want. You can set them all up differently and they will always all be responsive. However, you do have to follow this system. If you just go in and thrash around it may not work properly.
In order to use the system well, watch the video on using the column system. It only works if you use it the way it’s intended to work but if you do use it the way it’s intended to work, it works great.