1360 Grid System






Expansion

This is the 1360 Grid system based off of Nathan Smith's 960 Grid System. With modern monitor sizes being larger, it was made with the standard size of 1366 pixels in mind. It is expanded from Nathan's original 60-pixel columns to 65-pixel, maintaining the original 20-pixel gutter. I also went up to 16 columns total to keep them from being too large.

Purpose

The Idea behind the grid is to assist in the process for building a website. With preset dimensions and a grid in place, it makes it easier to map out a website and maintain a streamlined design. With the larger grid, it is possible to create seamless designs for screens of today and tomorrow.

How It Works

By specifying a container of 16 once, you then apply a class of grid_xx, where xx is the column width. By using the push_xx and pull_xx classes, info is moved higher in the page structure separate from how they appear in code. When a grid contains children, the use of alpha and omega will be needed. To add empty space before or after, you'll use prefix_xx or suffix_xx.