The 978px grid with added push/pull classes as well as prefix/suffix classes.  After reading an article by webdesignerwall.com, I decided to give their “simpler 978px grid” system a try. I like how it is slightly larger than the 960 grid system, has no margins on the far left and right sides, and also has 30px gutters. I quickly realized, however, that the css had no push, pull, prefix, or suffix classes.  So I decided to add them myself.

Push / Pull CSS classes

Quick summary, push and pull css classes are used to rearrange the order at which divs show up in the browser. This is beneficial for search engine spiders/robots, which read and weigh content based on the order at which your content appears in your source code. Read More about it here if ya’ like.

Prefix / Suffix CSS classes

Prefix and Suffix css classes are used to add extra columns of spacing in between the divs of a grid layout. You can see an example of this in the footer of my website.  Screen cap of how the spacing of one of the divs looks in firebug using suffix_1 class here:

Although this site currently uses the 960 grid system, you get the point.

Without further ado, here is the DEMO, with corresponding css. The rows at the very bottom giving examples of how to use the push / pull css as well as the prefix and suffix css.

Special thanks to you guys at http://www.webdesignerwall.com/ for creating the original 978px grid system!