Template Guide — 960 Grid System
To maximize your understanding and use of the templates, familiarity with the 960 Grid System is a must. Not only does it determine the layout of your content, but it does so in a way that is consistent across all modern browsers. Most web designers will tell you this is a challenge in and of itself, so using the grid system provides a significant advantage.
What is it?
The 960 Grid System is a CSS framework. A framework allows us to quickly add structure to a page using common sizes and elements. 1024 x 768 is a very common screen resolution and 960 pixels is a widely-accepted size for a web site that fits well in browsers for computers using that resolution. We have customized the framework slightly in order to accommodate our design, so while the actual number of pixels we will be dealing with is greater than 960, the concepts are the same.
Why should I use it?
Well, you don't have to use it! While we recommend that you use the grid structure provided in the CSS file, feel free to customize the content to your own needs if you find the grid too constricting. However, using even the basics of the grid system helps ensure that your site's content will work well with the templates and the rest of the institutional web presence.
How do I use it?
The grid system works by using special classes that we assign to divs (or any other element for that matter, but divs are the most common). Each column has an assigned width with 10px margins on the left and right. When you create a row, the total size of all elements will add up to the total page width.
For example, the UA templates use a 9 column structure. Here is the breakdown of widths for a 9 column grid:
- 88px
- 196px
- 304px
- 412px
- 520px
- 628px
- 736px
- 844px
- 952px
The basic idea is to make sure that when creating a horizontal row of content, all of the class numbers add up to the number of columns you're using.
For example, let's say you want your page to have a sidebar on the left with your content on the right. All you have to do is assign the left div the class of "column_2" and the right div a class of "column_7". The sum of those numbers equals 9, which is the number of columns our grid uses.
Perhaps you want to add another sidebar on the right side. You would assign the left div the class of "column_2", the middle div a class of "column_5", and the right div a class of "column_2". Again, the column numbers add up to a total of 9.
Your page's structure is now set and ready for content! What goes IN the columns is totally up to you - the columns just provide you with a quick and easy way to lay out the page. You retain full control over the content of each column.
More about 960 Grid System
If you would like to learn more about the 960 Grid System, check out any of these sites:
- 960 Grid System
- The Essence of the 960 grid
- Tutorial: Prototyping with the Grid 960 CSS Framework
- Video: Prototyping with the Grid 960 CSS Framework
- Fluid 960 Grid
- Elastic 960 Grid
Dimensions Demo
Click here to view a demo of UA's custom 960 grid.
