Web Templates
960 grid system and the templates
Before using the templates, become familiar with the style sheets and how the styles work with the grid system.
Style sheets
The "lib > css" folder has six style sheets. You must use 1 and 2 and should also use 5.
- reset.css: This sheet begins by zeroing out most of the commonly used HTML elements to level the playing field for all browsers. Attributes normally applied to these elements by browsers are removed, allowing you to set styles. Next you can specify styles for your site like the font used, the link colors, the style for heading tags, the margins for lists, and so on.
- templates.css: This introduces the 960 grid system and the template-specific styles used, such as those for the campus links, header, search, footer, and so on.
- optional.css: This can be used with the "fully loaded" templates, or chunks of styles can be copied into the template.css. Styles in this sheet include those used for the horizontal links and the unit footer.
- print.css: This constructs a print version of your web pages, assuming that the main content on your page is in the center and right columns. It removes things unnecessary for print, such as the left navigation and the unit's graphic header. A block M and wordmark combination appears in the upper left corner of pages, and unit-specific information can be added in the upper right corner.
- IE6 and IE7.css: These two style sheets correct problems - mainly positioning - that show up on versions 6 and 7 of Internet Explorer.
Example of a page with print style sheets
Click to see larger image
960 grid system
The grid system used to build the templates comes from 960.gs. The templates are constructed with a 12-column grid. This page, for example, uses a 2-column grid for the left navigation, an 8-column grid (often subdivided into two 4-column grids) for the center section, and a 2-column grid for the right section.
The skeleton of the grid for part of this page below the Our Brand graphic header and the page footer looks like this:
<!-- The body of the page starts with a 12 column container -->
<div class="container_12">
<div class="grid_2">
<p>This is the left navigation.</p>
</div>
<!-- The main body section is divided into two 4 column grids and one 2 column grid -->
<div class="grid_8">
<p>This is the breadcrumb, page title, and introductory paragraph.</p>
<div class="grid_4 alpha">
<p> This is the left center section.</p>
</div>
<div class="grid_4 omega">
<p> This is the right center section.</p>
</div>
<div class="grid_2">
<p>This is the right column.</p>
</div>
<! -- End of the 8 column main body section -->
</div>
<!-- End of the container -->
</div>
The number of grids used within the 12-column container must always add up to 12.
A single column in the grid is 80 pixels wide (20 pixels wider than the 960.gs code). The 960.gs code uses padding on their <div> tags to create space between columns. For the templates, the padding has been added to elements on the page, such as the <p> and <h> tags. Changing the markup in this way allows for background colors in columns to touch one another (see below).
If a grid unit contains grid, the first child in a row needs a class of alpha and the last child in a row needs the class name omega.
For example, this 2-column grid incorporates 'alpha' in the div style to keep the columns on the left side.
This 6-column grid uses "omega" in the div style to keep it positioned on the right. The grid_2 and grid_6 styles add up to 8; the width of the div that the columns are in. A clearing div is positioned after these divs so that the text reverts back to 8 columns wide.
The 960.gs system also uses "suffix" and "prefix" styles to add empty space before or after grid unit. The U's Web templates were constructed without these styles.