Using the 960 Grid System

When you begin to use the templates, you'll want to become familiar with the style sheets and how the styles work with the grid system. There are comments throughout the style sheets that should help you understand what individual styles are used for within the grid system and HTML comments to help you see how the pages are divided using the grids.

Style sheets

There are five style sheets in the "lib > css" folder. You will need to use at least the first three.

reset.css: This sheet zeros 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 your styles for your site.
text.css: This is where you can specify type, link, and list behavior for your entire site including the font used, the link colors, the style for heading tags, the margins for lists, and so on.
templates.css: This style sheet 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 style sheet can be used in its entirety when using the "fully loaded" templates, or chunks of styles can be copied into the template.css for those who only want to use the optional unit footer, for example.
print.css: The print style sheet constructs a print version of your Web pages, assuming that the main content on your page is in the center and right columns. This style sheet removes things that are 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 using the print style sheet, and the option to add unit-specific information that will display in the upper right corner is available. Standard footer information remains in tact.

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, a 6-column grid for the center section, and a 4-column grid for the right section.

The skeleton of the grid for part of this page between the eCommunication Standards graphic header and the page footer looks something like this:

  <div class="grid_2">
    This is my left navigation.
  </div>

<div class="grid_10">
This is my graphic header and breadcrumb.

    <div class="grid_6">
      This is the center section where I impart all my wisdom.
    </div>

    <div class="grid_4">
      This is the right column where I add interesting tidbits.
    </div>

</div>

The grids you use within the 12-column container must always add up to 12.

A single column in the grid is 80 pixels wide*. There is no padding or margins added to the grid columns - padding has been added to the elements that you place on the page, such as the <p> and <h> tags.

* The original 960 grid system includes a 10 pixel margin on each grid. This was changed for the templates to allow columns to meet, like those in the header, and to facilitate the use of background color in any columns.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires 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 4-column grid uses 'omega' in the div style to keep it positioned on the right. The grid_2 and grid_4 styles add up to 6; 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 6 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.

Fluid and elastic—The 960.gs site features these two spin off sites as sources for fluid and elastic code based on 960.gs.