Where is Sampson Videos?

Confused? That's okay, so am I. Sampson Videos was taken down some time back to motivate myself to do better - unfortunately, that blew up in my face. I'm currently working on bringing the project back to life. For now, enjoy the 1200 Grid System. If you really need to get to the videos, they're still available on sampsonvideos.blip.tv.

1200 GridSystem

What is it?

The 1200 GridSystem is a CSS rapid-prototyping tool to assist in quickly laying out complex div-based layouts. This grid system functions like, and shares syntax and conventions with, the popular 960 Grid System created by Nathan Smith.

1200 GridSystem provides for its user a 1200 pixel wide layout as opposed to a 960 pixel wide layout provided by the 960 Grid System. Also unlike the 960 Grid System, the 1200 Grid System only offers 1 type of container, consisting of up to 20 columns.

Toggle Grid

Download

You may download the 1200 GridSystem file(s) below. Included in your download will be the standard reset files that typically ship with the 960 Grid System.

1200GridSystem.zip | 2.08kb

Preparing the Environment

To prepare your page, be sure to include all stylesheet references, and add your container_20 element.

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Template</title>
	<link href="reset.css" rel="stylesheet" />
	<link href="text.css" rel="stylesheet" />
	<link href="1200.css" rel="stylesheet" />
  </head>
  <body>
	<div class="container_20">
	  <!-- where magic happens -->
	</div>
  </body>
</html>

Are You a Good Person?

How do you use it?

Anybody who has used the 960 Grid System will find no problems learning to use the 1200 Grid System. In fact, there isn't much learning to it if you're familiar with the 960 Grid System. Below are a series of simple examples that you can study, or copy and paste into your projects to begin your layouts. Above each example will be provided a short description of the example.

Two Columns

Here we have our container, and two equal-width columns. These columns will be set side-by-side, since they do not exceed the container width of 20 columns.

  <div class="container_20">
    <div class="grid_10"><p>Left Column</p></div>
    <div class="grid_10"><p>Right Column</p></div>
  </div>

Uneven Columns

Many layouts will require three vertical columns. In the example below we demonstrate how to setup a standard layout that consists of a left column, middle content area, and a right colum.

  <div class="container_20">
    <div class="grid_5"><p>Left Column</p></div>
    <div class="grid_10"><p>Center Column</p></div>
    <div class="grid_5"><p>Right Column</p></div>
  </div>

Nested Columns

Often times you may find the need to use grids as though they were mini-containers. Nesting grids doesn't require much effort, just be sure the nested grids don't exceed the width of their parent. In our example below, we have two 5's within one 10. Also, when nesting, be sure the first nested element has a class of "alpha" and the last a class of "omega". This removes conflicting margins and allows the nested elements to align themselves properly with the parent element.

  <div class="container_20">
    <div class="grid_10">
      <div class="grid_5 alpha"><p>Left nested column A</p></div>
      <div class="grid_5 omega"><p>Left nested column A</p></div>
    </div>
    <div class="grid_10"><p>Right Column</p></div>
  </div>

Column Prefix's and Suffix's

Adding a prefix causes the element to appear as though it had columns in front of it. Adding a suffix causes the element to appear as though there were columns after it. These create additional horizontal spaces between lateral grids.

  <div class="container_20">
    <div class="grid_4 prefix_4 suffix_4">
      <p>I appear to have four columns of emptiness before and after me.</p>
      <p>With prefix's and suffix's, I occupy 12 horizontal slots.</p>
    </div>
    <div class="grid_4 suffix_4">
      <p>I have four columns of emptiness to my right.</p>
    </div>
  </div>

Pushing and Pulling Columns

By adding push-classes and pull-classes to your grid, you can rearrange lateral grids to appear on either side of eachother. This allows you to have something appear earlier in the HTML, yet render lower in the browser.

  <div class="container_20">
    <div class="grid_10 push_10">
      <p>I appear second, though I'm really first.</p>
    </div>
    <div class="grid_10 pull_10">
      <p>I appear first, though I'm really second.</p>
    </div>
  </div>

All Together Now

Below is an example using all of the 1200 GridSystem featuers. Again, there's nothing here that didn't already exist in the 960 Grid System by Nathan Smith.

  <div class="container_20">
    <div class="grid_5 push_10">
      <p>I appear in the middle.</p>
    </div>
    <div class="grid_5 push_10">
      <p>I appear to the far right.</p>
    </div>
    <div class="grid_10 pull_10">
      <p>I am a large column which appears to the far left.</p>
      <div class="grid_4 alpha suffix_1">
        <p>I'm the first nested element.
        I have one invisible column to my right.</p>
      </div>
      <div class="grid_4 omega prefix_1">
        <p>I'm the second nested element.
        I have one invisible column to my left.</p>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>