From 901d1bb1a4af760ef9840fee75d67c303e248129 Mon Sep 17 00:00:00 2001
From: Jim Myhrberg <contact@jimeh.me>
Date: Sat, 5 Dec 2009 18:02:50 +0200
Subject: [PATCH] initial import

---
 .gitignore                      |    2 +
 LICENSE                         |   23 +
 README.md                       |   48 ++
 code/css/960.css                |    1 +
 code/css/reset.css              |    1 +
 code/css/text.css               |    1 +
 code/css/uncompressed/960.css   | 1061 +++++++++++++++++++++++++++++
 code/css/uncompressed/demo.css  |   52 ++
 code/css/uncompressed/reset.css |   53 ++
 code/css/uncompressed/text.css  |   84 +++
 code/demo.html                  | 1126 +++++++++++++++++++++++++++++++
 code/img/12_col.gif             |  Bin 0 -> 96 bytes
 code/img/16_col.gif             |  Bin 0 -> 101 bytes
 code/img/24_col.gif             |  Bin 0 -> 105 bytes
 generator/generate-grid.rb      |  163 +++++
 generator/grids.yml             |   16 +
 16 files changed, 2631 insertions(+)
 create mode 100644 .gitignore
 create mode 100755 LICENSE
 create mode 100644 README.md
 create mode 100644 code/css/960.css
 create mode 100755 code/css/reset.css
 create mode 100755 code/css/text.css
 create mode 100644 code/css/uncompressed/960.css
 create mode 100644 code/css/uncompressed/demo.css
 create mode 100755 code/css/uncompressed/reset.css
 create mode 100755 code/css/uncompressed/text.css
 create mode 100644 code/demo.html
 create mode 100755 code/img/12_col.gif
 create mode 100755 code/img/16_col.gif
 create mode 100644 code/img/24_col.gif
 create mode 100755 generator/generate-grid.rb
 create mode 100644 generator/grids.yml

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ca0973
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
diff --git a/LICENSE b/LICENSE
new file mode 100755
index 0000000..1429893
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,23 @@
+Copyright (c) 2009 Jim Myhrberg
+
+960.gs+ is based on 960.gs, created by and
+Copyright (c) 2008 Nathan Smith http://960.gs/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..335f7f2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,48 @@
+# 960 Grid System Plus
+
+This is a kind of clone/enhancement of the excellent [960 Grid System][960.gs] by [Nathan Smith][ns] to fit my personal likes and dislikes.
+
+
+## Differences from original 960 Grid System
+
+### .grid-* Classes
+
+The `.grid-*` classes are meant to supplement the default `.grid_*` classes. The `.grid-*` classes work the exact same way, except that they are margin-less, so you can easily place multiple `.grid_*` elements within a `.grid-*` element, and gives you more flexibility with custom paddings/margins for text content.
+
+It might be an issue of taste, but personally I don't like using the `alpha` and `omega` classes on the first and last child element. I'd rater use a different parent class, and use the `.grid_*` classes like normal within the parent grid class.
+
+### 24 Column Grid by Default
+
+The latest release of 960.gs includes a 24 column grid, but it can not be used with the default 960.css file which contains the 12 and 16 column grids. 960.gs+ includes all grid sizes within the one 960.css file.
+
+
+## Grid Usage
+
+Usage is identical to [960.gs][960.gs] aside from the `.grid-*` classes. To quickly explain, you can create two `.grid-8` elements with a `.container_16` element to create two columns. Within each `.grid-8` column, you can create `.grid_*` elements like normal, except you only have 8 columns of width to play with.
+
+
+## Design Templates
+
+Please refer to [960.gs][960.gs] for design templates for Photoshop, Illustrator, and many other applications.
+
+
+## Generator Usage
+
+I used the same generator (with the `.grid-*` addition) that I used for my [760 Grid System][760.gs] project.
+
+The generator is an easy to use shell script. Just edit `grids.yml` to your needs, and run:
+
+    ./generate-grid.rb > my_grid.css
+
+
+## Legal
+
+* Released under MIT license, of course.
+* Included Eric Meyer's comprehensive browser [reset stylesheet][em], which [960.gs][960.gs] also uses.
+* I borrowed the `text.css` and demo files from [960.gs][960.gs], I hope nobody minds :)
+
+
+[960.gs]: http://960.gs/
+[760.gs]: http://github.com/jimeh/760-grid-system
+[ns]: http://sonspring.com/
+[em]: http://meyerweb.com/eric/tools/css/reset/
diff --git a/code/css/960.css b/code/css/960.css
new file mode 100644
index 0000000..741dcb1
--- /dev/null
+++ b/code/css/960.css
@@ -0,0 +1 @@
+.alpha{margin-left:0!important;}.omega{margin-right:0!important;}.container_12,.container_16,.container_24{margin-left:auto;margin-right:auto;width:960px;}.container_12 .grid-1,.container_12 .grid-2,.container_12 .grid-3,.container_12 .grid-4,.container_12 .grid-5,.container_12 .grid-6,.container_12 .grid-7,.container_12 .grid-8,.container_12 .grid-9,.container_12 .grid-10,.container_12 .grid-11,.container_12 .grid-12,.container_16 .grid-1,.container_16 .grid-2,.container_16 .grid-3,.container_16 .grid-4,.container_16 .grid-5,.container_16 .grid-6,.container_16 .grid-7,.container_16 .grid-8,.container_16 .grid-9,.container_16 .grid-10,.container_16 .grid-11,.container_16 .grid-12,.container_16 .grid-13,.container_16 .grid-14,.container_16 .grid-15,.container_16 .grid-16,.container_24 .grid-1,.container_24 .grid-2,.container_24 .grid-3,.container_24 .grid-4,.container_24 .grid-5,.container_24 .grid-6,.container_24 .grid-7,.container_24 .grid-8,.container_24 .grid-9,.container_24 .grid-10,.container_24 .grid-11,.container_24 .grid-12,.container_24 .grid-13,.container_24 .grid-14,.container_24 .grid-15,.container_24 .grid-16,.container_24 .grid-17,.container_24 .grid-18,.container_24 .grid-19,.container_24 .grid-20,.container_24 .grid-21,.container_24 .grid-22,.container_24 .grid-23,.container_24 .grid-24{display:inline;float:left;position:relative;margin-left:0;margin-right:0;}.container_12 .grid-1,.container_24 .grid-2{width:80px;}.container_12 .grid-10,.container_24 .grid-20{width:800px;}.container_12 .grid-11,.container_16 .grid_15,.container_24 .grid-22{width:880px;}.container_12 .grid-12,.container_16 .grid-16,.container_24 .grid-24{width:960px;}.container_12 .grid-2,.container_16 .grid_3,.container_24 .grid-4{width:160px;}.container_12 .grid-3,.container_16 .grid-4,.container_24 .grid-6{width:240px;}.container_12 .grid-4,.container_24 .grid-8{width:320px;}.container_12 .grid-5,.container_16 .grid_7,.container_24 .grid-10{width:400px;}.container_12 .grid-6,.container_16 .grid-8,.container_24 .grid-12{width:480px;}.container_12 .grid-7,.container_24 .grid-14{width:560px;}.container_12 .grid-8,.container_16 .grid_11,.container_24 .grid-16{width:640px;}.container_12 .grid-9,.container_16 .grid-12,.container_24 .grid-18{width:720px;}.container_12 .grid_1,.container_12 .grid_2,.container_12 .grid_3,.container_12 .grid_4,.container_12 .grid_5,.container_12 .grid_6,.container_12 .grid_7,.container_12 .grid_8,.container_12 .grid_9,.container_12 .grid_10,.container_12 .grid_11,.container_12 .grid_12,.container_16 .grid_1,.container_16 .grid_2,.container_16 .grid_3,.container_16 .grid_4,.container_16 .grid_5,.container_16 .grid_6,.container_16 .grid_7,.container_16 .grid_8,.container_16 .grid_9,.container_16 .grid_10,.container_16 .grid_11,.container_16 .grid_12,.container_16 .grid_13,.container_16 .grid_14,.container_16 .grid_15,.container_16 .grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px;}.container_12 .grid_1,.container_16 .grid-1{width:60px;}.container_12 .grid_10,.container_16 .grid-13{width:780px;}.container_12 .grid_11{width:860px;}.container_12 .grid_12,.container_16 .grid_16{width:940px;}.container_12 .grid_2{width:140px;}.container_12 .grid_3,.container_16 .grid_4{width:220px;}.container_12 .grid_4,.container_16 .grid-5{width:300px;}.container_12 .grid_5{width:380px;}.container_12 .grid_6,.container_16 .grid_8{width:460px;}.container_12 .grid_7,.container_16 .grid-9{width:540px;}.container_12 .grid_8{width:620px;}.container_12 .grid_9,.container_16 .grid_12{width:700px;}.container_12 .prefix_1,.container_24 .prefix_2{padding-left:80px;}.container_12 .prefix_10,.container_24 .prefix_20{padding-left:800px;}.container_12 .prefix_11,.container_24 .prefix_22{padding-left:880px;}.container_12 .prefix_2,.container_24 .prefix_4{padding-left:160px;}.container_12 .prefix_3,.container_16 .prefix_4,.container_24 .prefix_6{padding-left:240px;}.container_12 .prefix_4,.container_24 .prefix_8{padding-left:320px;}.container_12 .prefix_5,.container_24 .prefix_10{padding-left:400px;}.container_12 .prefix_6,.container_16 .prefix_8,.container_24 .prefix_12{padding-left:480px;}.container_12 .prefix_7,.container_24 .prefix_14{padding-left:560px;}.container_12 .prefix_8,.container_24 .prefix_16{padding-left:640px;}.container_12 .prefix_9,.container_16 .prefix_12,.container_24 .prefix_18{padding-left:720px;}.container_12 .pull_1,.container_24 .pull_2{left:-80px;}.container_12 .pull_10,.container_24 .pull_20{left:-800px;}.container_12 .pull_11,.container_24 .pull_22{left:-880px;}.container_12 .pull_2,.container_24 .pull_4{left:-160px;}.container_12 .pull_3,.container_16 .pull_4,.container_24 .pull_6{left:-240px;}.container_12 .pull_4,.container_24 .pull_8{left:-320px;}.container_12 .pull_5,.container_24 .pull_10{left:-400px;}.container_12 .pull_6,.container_16 .pull_8,.container_24 .pull_12{left:-480px;}.container_12 .pull_7,.container_24 .pull_14{left:-560px;}.container_12 .pull_8,.container_24 .pull_16{left:-640px;}.container_12 .pull_9,.container_16 .pull_12,.container_24 .pull_18{left:-720px;}.container_12 .push_1,.container_24 .push_2{left:80px;}.container_12 .push_10,.container_24 .push_20{left:800px;}.container_12 .push_11,.container_24 .push_22{left:880px;}.container_12 .push_2,.container_24 .push_4{left:160px;}.container_12 .push_3,.container_16 .push_4,.container_24 .push_6{left:240px;}.container_12 .push_4,.container_24 .push_8{left:320px;}.container_12 .push_5,.container_24 .push_10{left:400px;}.container_12 .push_6,.container_16 .push_8,.container_24 .push_12{left:480px;}.container_12 .push_7,.container_24 .push_14{left:560px;}.container_12 .push_8,.container_24 .push_16{left:640px;}.container_12 .push_9,.container_16 .push_12,.container_24 .push_18{left:720px;}.container_12 .suffix_1,.container_24 .suffix_2{padding-right:80px;}.container_12 .suffix_10,.container_24 .suffix_20{padding-right:800px;}.container_12 .suffix_11,.container_24 .suffix_22{padding-right:880px;}.container_12 .suffix_2,.container_24 .suffix_4{padding-right:160px;}.container_12 .suffix_3,.container_16 .suffix_4,.container_24 .suffix_6{padding-right:240px;}.container_12 .suffix_4,.container_24 .suffix_8{padding-right:320px;}.container_12 .suffix_5,.container_24 .suffix_10{padding-right:400px;}.container_12 .suffix_6,.container_16 .suffix_8,.container_24 .suffix_12{padding-right:480px;}.container_12 .suffix_7,.container_24 .suffix_14{padding-right:560px;}.container_12 .suffix_8,.container_24 .suffix_16{padding-right:640px;}.container_12 .suffix_9,.container_16 .suffix_12,.container_24 .suffix_18{padding-right:720px;}.container_16 .grid-10,.container_24 .grid-15{width:600px;}.container_16 .grid-11{width:660px;}.container_16 .grid-14,.container_24 .grid-21{width:840px;}.container_16 .grid-15{width:900px;}.container_16 .grid-2,.container_24 .grid-3{width:120px;}.container_16 .grid-3{width:180px;}.container_16 .grid-6,.container_24 .grid-9{width:360px;}.container_16 .grid-7{width:420px;}.container_16 .grid_1,.container_24 .grid-1{width:40px;}.container_16 .grid_10{width:580px;}.container_16 .grid_13,.container_24 .grid-19{width:760px;}.container_16 .grid_14{width:820px;}.container_16 .grid_2{width:100px;}.container_16 .grid_5,.container_24 .grid-7{width:280px;}.container_16 .grid_6{width:340px;}.container_16 .grid_9,.container_24 .grid-13{width:520px;}.container_16 .prefix_1{padding-left:60px;}.container_16 .prefix_10,.container_24 .prefix_15{padding-left:600px;}.container_16 .prefix_11{padding-left:660px;}.container_16 .prefix_13{padding-left:780px;}.container_16 .prefix_14,.container_24 .prefix_21{padding-left:840px;}.container_16 .prefix_15{padding-left:900px;}.container_16 .prefix_2,.container_24 .prefix_3{padding-left:120px;}.container_16 .prefix_3{padding-left:180px;}.container_16 .prefix_5{padding-left:300px;}.container_16 .prefix_6,.container_24 .prefix_9{padding-left:360px;}.container_16 .prefix_7{padding-left:420px;}.container_16 .prefix_9{padding-left:540px;}.container_16 .pull_1{left:-60px;}.container_16 .pull_10,.container_24 .pull_15{left:-600px;}.container_16 .pull_11{left:-660px;}.container_16 .pull_13{left:-780px;}.container_16 .pull_14,.container_24 .pull_21{left:-840px;}.container_16 .pull_15{left:-900px;}.container_16 .pull_2,.container_24 .pull_3{left:-120px;}.container_16 .pull_3{left:-180px;}.container_16 .pull_5{left:-300px;}.container_16 .pull_6,.container_24 .pull_9{left:-360px;}.container_16 .pull_7{left:-420px;}.container_16 .pull_9{left:-540px;}.container_16 .push_1{left:60px;}.container_16 .push_10,.container_24 .push_15{left:600px;}.container_16 .push_11{left:660px;}.container_16 .push_13{left:780px;}.container_16 .push_14,.container_24 .push_21{left:840px;}.container_16 .push_15{left:900px;}.container_16 .push_2,.container_24 .push_3{left:120px;}.container_16 .push_3{left:180px;}.container_16 .push_5{left:300px;}.container_16 .push_6,.container_24 .push_9{left:360px;}.container_16 .push_7{left:420px;}.container_16 .push_9{left:540px;}.container_16 .suffix_1{padding-right:60px;}.container_16 .suffix_10,.container_24 .suffix_15{padding-right:600px;}.container_16 .suffix_11{padding-right:660px;}.container_16 .suffix_13{padding-right:780px;}.container_16 .suffix_14,.container_24 .suffix_21{padding-right:840px;}.container_16 .suffix_15{padding-right:900px;}.container_16 .suffix_2,.container_24 .suffix_3{padding-right:120px;}.container_16 .suffix_3{padding-right:180px;}.container_16 .suffix_5{padding-right:300px;}.container_16 .suffix_6,.container_24 .suffix_9{padding-right:360px;}.container_16 .suffix_7{padding-right:420px;}.container_16 .suffix_9{padding-right:540px;}.container_24 .grid-11{width:440px;}.container_24 .grid-17{width:680px;}.container_24 .grid-23{width:920px;}.container_24 .grid-5{width:200px;}.container_24 .grid_1{width:30px;}.container_24 .grid_1,.container_24 .grid_2,.container_24 .grid_3,.container_24 .grid_4,.container_24 .grid_5,.container_24 .grid_6,.container_24 .grid_7,.container_24 .grid_8,.container_24 .grid_9,.container_24 .grid_10,.container_24 .grid_11,.container_24 .grid_12,.container_24 .grid_13,.container_24 .grid_14,.container_24 .grid_15,.container_24 .grid_16,.container_24 .grid_17,.container_24 .grid_18,.container_24 .grid_19,.container_24 .grid_20,.container_24 .grid_21,.container_24 .grid_22,.container_24 .grid_23,.container_24 .grid_24{display:inline;float:left;position:relative;margin-left:5px;margin-right:5px;}.container_24 .grid_10{width:390px;}.container_24 .grid_11{width:430px;}.container_24 .grid_12{width:470px;}.container_24 .grid_13{width:510px;}.container_24 .grid_14{width:550px;}.container_24 .grid_15{width:590px;}.container_24 .grid_16{width:630px;}.container_24 .grid_17{width:670px;}.container_24 .grid_18{width:710px;}.container_24 .grid_19{width:750px;}.container_24 .grid_2{width:70px;}.container_24 .grid_20{width:790px;}.container_24 .grid_21{width:830px;}.container_24 .grid_22{width:870px;}.container_24 .grid_23{width:910px;}.container_24 .grid_24{width:950px;}.container_24 .grid_3{width:110px;}.container_24 .grid_4{width:150px;}.container_24 .grid_5{width:190px;}.container_24 .grid_6{width:230px;}.container_24 .grid_7{width:270px;}.container_24 .grid_8{width:310px;}.container_24 .grid_9{width:350px;}.container_24 .prefix_1{padding-left:40px;}.container_24 .prefix_11{padding-left:440px;}.container_24 .prefix_13{padding-left:520px;}.container_24 .prefix_17{padding-left:680px;}.container_24 .prefix_19{padding-left:760px;}.container_24 .prefix_23{padding-left:920px;}.container_24 .prefix_5{padding-left:200px;}.container_24 .prefix_7{padding-left:280px;}.container_24 .pull_1{left:-40px;}.container_24 .pull_11{left:-440px;}.container_24 .pull_13{left:-520px;}.container_24 .pull_17{left:-680px;}.container_24 .pull_19{left:-760px;}.container_24 .pull_23{left:-920px;}.container_24 .pull_5{left:-200px;}.container_24 .pull_7{left:-280px;}.container_24 .push_1{left:40px;}.container_24 .push_11{left:440px;}.container_24 .push_13{left:520px;}.container_24 .push_17{left:680px;}.container_24 .push_19{left:760px;}.container_24 .push_23{left:920px;}.container_24 .push_5{left:200px;}.container_24 .push_7{left:280px;}.container_24 .suffix_1{padding-right:40px;}.container_24 .suffix_11{padding-right:440px;}.container_24 .suffix_13{padding-right:520px;}.container_24 .suffix_17{padding-right:680px;}.container_24 .suffix_19{padding-right:760px;}.container_24 .suffix_23{padding-right:920px;}.container_24 .suffix_5{padding-right:200px;}.container_24 .suffix_7{padding-right:280px;}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}* html .clearfix{height:1%;}
\ No newline at end of file
diff --git a/code/css/reset.css b/code/css/reset.css
new file mode 100755
index 0000000..99a0211
--- /dev/null
+++ b/code/css/reset.css
@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
diff --git a/code/css/text.css b/code/css/text.css
new file mode 100755
index 0000000..f37d174
--- /dev/null
+++ b/code/css/text.css
@@ -0,0 +1 @@
+body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}
\ No newline at end of file
diff --git a/code/css/uncompressed/960.css b/code/css/uncompressed/960.css
new file mode 100644
index 0000000..1d1d3b5
--- /dev/null
+++ b/code/css/uncompressed/960.css
@@ -0,0 +1,1061 @@
+
+/*
+  960 Grid System Plus.
+  -- Based on the 960 Grid System ~ http://960.gs/
+  
+  Licensed under MIT.
+*/
+
+/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+  margin-left: 0 !important;
+}
+
+.omega {
+  margin-right: 0 !important;
+}
+
+/* `Containers & Grids
+----------------------------------------------------------------------------------------------------*/
+
+.container_12,
+.container_16,
+.container_24 {
+	margin-left: auto;
+	margin-right: auto;
+	width: 960px;
+}
+
+.container_12 .grid-1,
+.container_12 .grid-2,
+.container_12 .grid-3,
+.container_12 .grid-4,
+.container_12 .grid-5,
+.container_12 .grid-6,
+.container_12 .grid-7,
+.container_12 .grid-8,
+.container_12 .grid-9,
+.container_12 .grid-10,
+.container_12 .grid-11,
+.container_12 .grid-12,
+.container_16 .grid-1,
+.container_16 .grid-2,
+.container_16 .grid-3,
+.container_16 .grid-4,
+.container_16 .grid-5,
+.container_16 .grid-6,
+.container_16 .grid-7,
+.container_16 .grid-8,
+.container_16 .grid-9,
+.container_16 .grid-10,
+.container_16 .grid-11,
+.container_16 .grid-12,
+.container_16 .grid-13,
+.container_16 .grid-14,
+.container_16 .grid-15,
+.container_16 .grid-16,
+.container_24 .grid-1,
+.container_24 .grid-2,
+.container_24 .grid-3,
+.container_24 .grid-4,
+.container_24 .grid-5,
+.container_24 .grid-6,
+.container_24 .grid-7,
+.container_24 .grid-8,
+.container_24 .grid-9,
+.container_24 .grid-10,
+.container_24 .grid-11,
+.container_24 .grid-12,
+.container_24 .grid-13,
+.container_24 .grid-14,
+.container_24 .grid-15,
+.container_24 .grid-16,
+.container_24 .grid-17,
+.container_24 .grid-18,
+.container_24 .grid-19,
+.container_24 .grid-20,
+.container_24 .grid-21,
+.container_24 .grid-22,
+.container_24 .grid-23,
+.container_24 .grid-24 {
+	display: inline;
+	float: left;
+	position: relative;
+	margin-left: 0px;
+	margin-right: 0px;
+}
+
+.container_12 .grid-1,
+.container_24 .grid-2 {
+	width: 80px;
+}
+
+.container_12 .grid-10,
+.container_24 .grid-20 {
+	width: 800px;
+}
+
+.container_12 .grid-11,
+.container_16 .grid_15,
+.container_24 .grid-22 {
+	width: 880px;
+}
+
+.container_12 .grid-12,
+.container_16 .grid-16,
+.container_24 .grid-24 {
+	width: 960px;
+}
+
+.container_12 .grid-2,
+.container_16 .grid_3,
+.container_24 .grid-4 {
+	width: 160px;
+}
+
+.container_12 .grid-3,
+.container_16 .grid-4,
+.container_24 .grid-6 {
+	width: 240px;
+}
+
+.container_12 .grid-4,
+.container_24 .grid-8 {
+	width: 320px;
+}
+
+.container_12 .grid-5,
+.container_16 .grid_7,
+.container_24 .grid-10 {
+	width: 400px;
+}
+
+.container_12 .grid-6,
+.container_16 .grid-8,
+.container_24 .grid-12 {
+	width: 480px;
+}
+
+.container_12 .grid-7,
+.container_24 .grid-14 {
+	width: 560px;
+}
+
+.container_12 .grid-8,
+.container_16 .grid_11,
+.container_24 .grid-16 {
+	width: 640px;
+}
+
+.container_12 .grid-9,
+.container_16 .grid-12,
+.container_24 .grid-18 {
+	width: 720px;
+}
+
+.container_12 .grid_1,
+.container_12 .grid_2,
+.container_12 .grid_3,
+.container_12 .grid_4,
+.container_12 .grid_5,
+.container_12 .grid_6,
+.container_12 .grid_7,
+.container_12 .grid_8,
+.container_12 .grid_9,
+.container_12 .grid_10,
+.container_12 .grid_11,
+.container_12 .grid_12,
+.container_16 .grid_1,
+.container_16 .grid_2,
+.container_16 .grid_3,
+.container_16 .grid_4,
+.container_16 .grid_5,
+.container_16 .grid_6,
+.container_16 .grid_7,
+.container_16 .grid_8,
+.container_16 .grid_9,
+.container_16 .grid_10,
+.container_16 .grid_11,
+.container_16 .grid_12,
+.container_16 .grid_13,
+.container_16 .grid_14,
+.container_16 .grid_15,
+.container_16 .grid_16 {
+	display: inline;
+	float: left;
+	position: relative;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.container_12 .grid_1,
+.container_16 .grid-1 {
+	width: 60px;
+}
+
+.container_12 .grid_10,
+.container_16 .grid-13 {
+	width: 780px;
+}
+
+.container_12 .grid_11 {
+	width: 860px;
+}
+
+.container_12 .grid_12,
+.container_16 .grid_16 {
+	width: 940px;
+}
+
+.container_12 .grid_2 {
+	width: 140px;
+}
+
+.container_12 .grid_3,
+.container_16 .grid_4 {
+	width: 220px;
+}
+
+.container_12 .grid_4,
+.container_16 .grid-5 {
+	width: 300px;
+}
+
+.container_12 .grid_5 {
+	width: 380px;
+}
+
+.container_12 .grid_6,
+.container_16 .grid_8 {
+	width: 460px;
+}
+
+.container_12 .grid_7,
+.container_16 .grid-9 {
+	width: 540px;
+}
+
+.container_12 .grid_8 {
+	width: 620px;
+}
+
+.container_12 .grid_9,
+.container_16 .grid_12 {
+	width: 700px;
+}
+
+.container_12 .prefix_1,
+.container_24 .prefix_2 {
+	padding-left: 80px;
+}
+
+.container_12 .prefix_10,
+.container_24 .prefix_20 {
+	padding-left: 800px;
+}
+
+.container_12 .prefix_11,
+.container_24 .prefix_22 {
+	padding-left: 880px;
+}
+
+.container_12 .prefix_2,
+.container_24 .prefix_4 {
+	padding-left: 160px;
+}
+
+.container_12 .prefix_3,
+.container_16 .prefix_4,
+.container_24 .prefix_6 {
+	padding-left: 240px;
+}
+
+.container_12 .prefix_4,
+.container_24 .prefix_8 {
+	padding-left: 320px;
+}
+
+.container_12 .prefix_5,
+.container_24 .prefix_10 {
+	padding-left: 400px;
+}
+
+.container_12 .prefix_6,
+.container_16 .prefix_8,
+.container_24 .prefix_12 {
+	padding-left: 480px;
+}
+
+.container_12 .prefix_7,
+.container_24 .prefix_14 {
+	padding-left: 560px;
+}
+
+.container_12 .prefix_8,
+.container_24 .prefix_16 {
+	padding-left: 640px;
+}
+
+.container_12 .prefix_9,
+.container_16 .prefix_12,
+.container_24 .prefix_18 {
+	padding-left: 720px;
+}
+
+.container_12 .pull_1,
+.container_24 .pull_2 {
+	left: -80px;
+}
+
+.container_12 .pull_10,
+.container_24 .pull_20 {
+	left: -800px;
+}
+
+.container_12 .pull_11,
+.container_24 .pull_22 {
+	left: -880px;
+}
+
+.container_12 .pull_2,
+.container_24 .pull_4 {
+	left: -160px;
+}
+
+.container_12 .pull_3,
+.container_16 .pull_4,
+.container_24 .pull_6 {
+	left: -240px;
+}
+
+.container_12 .pull_4,
+.container_24 .pull_8 {
+	left: -320px;
+}
+
+.container_12 .pull_5,
+.container_24 .pull_10 {
+	left: -400px;
+}
+
+.container_12 .pull_6,
+.container_16 .pull_8,
+.container_24 .pull_12 {
+	left: -480px;
+}
+
+.container_12 .pull_7,
+.container_24 .pull_14 {
+	left: -560px;
+}
+
+.container_12 .pull_8,
+.container_24 .pull_16 {
+	left: -640px;
+}
+
+.container_12 .pull_9,
+.container_16 .pull_12,
+.container_24 .pull_18 {
+	left: -720px;
+}
+
+.container_12 .push_1,
+.container_24 .push_2 {
+	left: 80px;
+}
+
+.container_12 .push_10,
+.container_24 .push_20 {
+	left: 800px;
+}
+
+.container_12 .push_11,
+.container_24 .push_22 {
+	left: 880px;
+}
+
+.container_12 .push_2,
+.container_24 .push_4 {
+	left: 160px;
+}
+
+.container_12 .push_3,
+.container_16 .push_4,
+.container_24 .push_6 {
+	left: 240px;
+}
+
+.container_12 .push_4,
+.container_24 .push_8 {
+	left: 320px;
+}
+
+.container_12 .push_5,
+.container_24 .push_10 {
+	left: 400px;
+}
+
+.container_12 .push_6,
+.container_16 .push_8,
+.container_24 .push_12 {
+	left: 480px;
+}
+
+.container_12 .push_7,
+.container_24 .push_14 {
+	left: 560px;
+}
+
+.container_12 .push_8,
+.container_24 .push_16 {
+	left: 640px;
+}
+
+.container_12 .push_9,
+.container_16 .push_12,
+.container_24 .push_18 {
+	left: 720px;
+}
+
+.container_12 .suffix_1,
+.container_24 .suffix_2 {
+	padding-right: 80px;
+}
+
+.container_12 .suffix_10,
+.container_24 .suffix_20 {
+	padding-right: 800px;
+}
+
+.container_12 .suffix_11,
+.container_24 .suffix_22 {
+	padding-right: 880px;
+}
+
+.container_12 .suffix_2,
+.container_24 .suffix_4 {
+	padding-right: 160px;
+}
+
+.container_12 .suffix_3,
+.container_16 .suffix_4,
+.container_24 .suffix_6 {
+	padding-right: 240px;
+}
+
+.container_12 .suffix_4,
+.container_24 .suffix_8 {
+	padding-right: 320px;
+}
+
+.container_12 .suffix_5,
+.container_24 .suffix_10 {
+	padding-right: 400px;
+}
+
+.container_12 .suffix_6,
+.container_16 .suffix_8,
+.container_24 .suffix_12 {
+	padding-right: 480px;
+}
+
+.container_12 .suffix_7,
+.container_24 .suffix_14 {
+	padding-right: 560px;
+}
+
+.container_12 .suffix_8,
+.container_24 .suffix_16 {
+	padding-right: 640px;
+}
+
+.container_12 .suffix_9,
+.container_16 .suffix_12,
+.container_24 .suffix_18 {
+	padding-right: 720px;
+}
+
+.container_16 .grid-10,
+.container_24 .grid-15 {
+	width: 600px;
+}
+
+.container_16 .grid-11 {
+	width: 660px;
+}
+
+.container_16 .grid-14,
+.container_24 .grid-21 {
+	width: 840px;
+}
+
+.container_16 .grid-15 {
+	width: 900px;
+}
+
+.container_16 .grid-2,
+.container_24 .grid-3 {
+	width: 120px;
+}
+
+.container_16 .grid-3 {
+	width: 180px;
+}
+
+.container_16 .grid-6,
+.container_24 .grid-9 {
+	width: 360px;
+}
+
+.container_16 .grid-7 {
+	width: 420px;
+}
+
+.container_16 .grid_1,
+.container_24 .grid-1 {
+	width: 40px;
+}
+
+.container_16 .grid_10 {
+	width: 580px;
+}
+
+.container_16 .grid_13,
+.container_24 .grid-19 {
+	width: 760px;
+}
+
+.container_16 .grid_14 {
+	width: 820px;
+}
+
+.container_16 .grid_2 {
+	width: 100px;
+}
+
+.container_16 .grid_5,
+.container_24 .grid-7 {
+	width: 280px;
+}
+
+.container_16 .grid_6 {
+	width: 340px;
+}
+
+.container_16 .grid_9,
+.container_24 .grid-13 {
+	width: 520px;
+}
+
+.container_16 .prefix_1 {
+	padding-left: 60px;
+}
+
+.container_16 .prefix_10,
+.container_24 .prefix_15 {
+	padding-left: 600px;
+}
+
+.container_16 .prefix_11 {
+	padding-left: 660px;
+}
+
+.container_16 .prefix_13 {
+	padding-left: 780px;
+}
+
+.container_16 .prefix_14,
+.container_24 .prefix_21 {
+	padding-left: 840px;
+}
+
+.container_16 .prefix_15 {
+	padding-left: 900px;
+}
+
+.container_16 .prefix_2,
+.container_24 .prefix_3 {
+	padding-left: 120px;
+}
+
+.container_16 .prefix_3 {
+	padding-left: 180px;
+}
+
+.container_16 .prefix_5 {
+	padding-left: 300px;
+}
+
+.container_16 .prefix_6,
+.container_24 .prefix_9 {
+	padding-left: 360px;
+}
+
+.container_16 .prefix_7 {
+	padding-left: 420px;
+}
+
+.container_16 .prefix_9 {
+	padding-left: 540px;
+}
+
+.container_16 .pull_1 {
+	left: -60px;
+}
+
+.container_16 .pull_10,
+.container_24 .pull_15 {
+	left: -600px;
+}
+
+.container_16 .pull_11 {
+	left: -660px;
+}
+
+.container_16 .pull_13 {
+	left: -780px;
+}
+
+.container_16 .pull_14,
+.container_24 .pull_21 {
+	left: -840px;
+}
+
+.container_16 .pull_15 {
+	left: -900px;
+}
+
+.container_16 .pull_2,
+.container_24 .pull_3 {
+	left: -120px;
+}
+
+.container_16 .pull_3 {
+	left: -180px;
+}
+
+.container_16 .pull_5 {
+	left: -300px;
+}
+
+.container_16 .pull_6,
+.container_24 .pull_9 {
+	left: -360px;
+}
+
+.container_16 .pull_7 {
+	left: -420px;
+}
+
+.container_16 .pull_9 {
+	left: -540px;
+}
+
+.container_16 .push_1 {
+	left: 60px;
+}
+
+.container_16 .push_10,
+.container_24 .push_15 {
+	left: 600px;
+}
+
+.container_16 .push_11 {
+	left: 660px;
+}
+
+.container_16 .push_13 {
+	left: 780px;
+}
+
+.container_16 .push_14,
+.container_24 .push_21 {
+	left: 840px;
+}
+
+.container_16 .push_15 {
+	left: 900px;
+}
+
+.container_16 .push_2,
+.container_24 .push_3 {
+	left: 120px;
+}
+
+.container_16 .push_3 {
+	left: 180px;
+}
+
+.container_16 .push_5 {
+	left: 300px;
+}
+
+.container_16 .push_6,
+.container_24 .push_9 {
+	left: 360px;
+}
+
+.container_16 .push_7 {
+	left: 420px;
+}
+
+.container_16 .push_9 {
+	left: 540px;
+}
+
+.container_16 .suffix_1 {
+	padding-right: 60px;
+}
+
+.container_16 .suffix_10,
+.container_24 .suffix_15 {
+	padding-right: 600px;
+}
+
+.container_16 .suffix_11 {
+	padding-right: 660px;
+}
+
+.container_16 .suffix_13 {
+	padding-right: 780px;
+}
+
+.container_16 .suffix_14,
+.container_24 .suffix_21 {
+	padding-right: 840px;
+}
+
+.container_16 .suffix_15 {
+	padding-right: 900px;
+}
+
+.container_16 .suffix_2,
+.container_24 .suffix_3 {
+	padding-right: 120px;
+}
+
+.container_16 .suffix_3 {
+	padding-right: 180px;
+}
+
+.container_16 .suffix_5 {
+	padding-right: 300px;
+}
+
+.container_16 .suffix_6,
+.container_24 .suffix_9 {
+	padding-right: 360px;
+}
+
+.container_16 .suffix_7 {
+	padding-right: 420px;
+}
+
+.container_16 .suffix_9 {
+	padding-right: 540px;
+}
+
+.container_24 .grid-11 {
+	width: 440px;
+}
+
+.container_24 .grid-17 {
+	width: 680px;
+}
+
+.container_24 .grid-23 {
+	width: 920px;
+}
+
+.container_24 .grid-5 {
+	width: 200px;
+}
+
+.container_24 .grid_1 {
+	width: 30px;
+}
+
+.container_24 .grid_1,
+.container_24 .grid_2,
+.container_24 .grid_3,
+.container_24 .grid_4,
+.container_24 .grid_5,
+.container_24 .grid_6,
+.container_24 .grid_7,
+.container_24 .grid_8,
+.container_24 .grid_9,
+.container_24 .grid_10,
+.container_24 .grid_11,
+.container_24 .grid_12,
+.container_24 .grid_13,
+.container_24 .grid_14,
+.container_24 .grid_15,
+.container_24 .grid_16,
+.container_24 .grid_17,
+.container_24 .grid_18,
+.container_24 .grid_19,
+.container_24 .grid_20,
+.container_24 .grid_21,
+.container_24 .grid_22,
+.container_24 .grid_23,
+.container_24 .grid_24 {
+	display: inline;
+	float: left;
+	position: relative;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+.container_24 .grid_10 {
+	width: 390px;
+}
+
+.container_24 .grid_11 {
+	width: 430px;
+}
+
+.container_24 .grid_12 {
+	width: 470px;
+}
+
+.container_24 .grid_13 {
+	width: 510px;
+}
+
+.container_24 .grid_14 {
+	width: 550px;
+}
+
+.container_24 .grid_15 {
+	width: 590px;
+}
+
+.container_24 .grid_16 {
+	width: 630px;
+}
+
+.container_24 .grid_17 {
+	width: 670px;
+}
+
+.container_24 .grid_18 {
+	width: 710px;
+}
+
+.container_24 .grid_19 {
+	width: 750px;
+}
+
+.container_24 .grid_2 {
+	width: 70px;
+}
+
+.container_24 .grid_20 {
+	width: 790px;
+}
+
+.container_24 .grid_21 {
+	width: 830px;
+}
+
+.container_24 .grid_22 {
+	width: 870px;
+}
+
+.container_24 .grid_23 {
+	width: 910px;
+}
+
+.container_24 .grid_24 {
+	width: 950px;
+}
+
+.container_24 .grid_3 {
+	width: 110px;
+}
+
+.container_24 .grid_4 {
+	width: 150px;
+}
+
+.container_24 .grid_5 {
+	width: 190px;
+}
+
+.container_24 .grid_6 {
+	width: 230px;
+}
+
+.container_24 .grid_7 {
+	width: 270px;
+}
+
+.container_24 .grid_8 {
+	width: 310px;
+}
+
+.container_24 .grid_9 {
+	width: 350px;
+}
+
+.container_24 .prefix_1 {
+	padding-left: 40px;
+}
+
+.container_24 .prefix_11 {
+	padding-left: 440px;
+}
+
+.container_24 .prefix_13 {
+	padding-left: 520px;
+}
+
+.container_24 .prefix_17 {
+	padding-left: 680px;
+}
+
+.container_24 .prefix_19 {
+	padding-left: 760px;
+}
+
+.container_24 .prefix_23 {
+	padding-left: 920px;
+}
+
+.container_24 .prefix_5 {
+	padding-left: 200px;
+}
+
+.container_24 .prefix_7 {
+	padding-left: 280px;
+}
+
+.container_24 .pull_1 {
+	left: -40px;
+}
+
+.container_24 .pull_11 {
+	left: -440px;
+}
+
+.container_24 .pull_13 {
+	left: -520px;
+}
+
+.container_24 .pull_17 {
+	left: -680px;
+}
+
+.container_24 .pull_19 {
+	left: -760px;
+}
+
+.container_24 .pull_23 {
+	left: -920px;
+}
+
+.container_24 .pull_5 {
+	left: -200px;
+}
+
+.container_24 .pull_7 {
+	left: -280px;
+}
+
+.container_24 .push_1 {
+	left: 40px;
+}
+
+.container_24 .push_11 {
+	left: 440px;
+}
+
+.container_24 .push_13 {
+	left: 520px;
+}
+
+.container_24 .push_17 {
+	left: 680px;
+}
+
+.container_24 .push_19 {
+	left: 760px;
+}
+
+.container_24 .push_23 {
+	left: 920px;
+}
+
+.container_24 .push_5 {
+	left: 200px;
+}
+
+.container_24 .push_7 {
+	left: 280px;
+}
+
+.container_24 .suffix_1 {
+	padding-right: 40px;
+}
+
+.container_24 .suffix_11 {
+	padding-right: 440px;
+}
+
+.container_24 .suffix_13 {
+	padding-right: 520px;
+}
+
+.container_24 .suffix_17 {
+	padding-right: 680px;
+}
+
+.container_24 .suffix_19 {
+	padding-right: 760px;
+}
+
+.container_24 .suffix_23 {
+	padding-right: 920px;
+}
+
+.container_24 .suffix_5 {
+	padding-right: 200px;
+}
+
+.container_24 .suffix_7 {
+	padding-right: 280px;
+}
+
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+	clear: both;
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
+.clearfix:after {
+	clear: both;
+	content: ' ';
+	display: block;
+	font-size: 0;
+	line-height: 0;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+* html .clearfix {
+	height: 1%;
+}
diff --git a/code/css/uncompressed/demo.css b/code/css/uncompressed/demo.css
new file mode 100644
index 0000000..ef8294c
--- /dev/null
+++ b/code/css/uncompressed/demo.css
@@ -0,0 +1,52 @@
+body {
+	background: #123;
+	border-top: 5px solid #000;
+	color: #333;
+	font-size: 11px;
+	padding: 20px 0 40px;
+}
+
+a {
+	color: #fff;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-family: Georgia, serif;
+	font-weight: normal;
+	text-align: center;
+}
+
+h2 {
+	padding: 20px 0 0;
+	text-align: center;
+}
+
+p {
+	border: 1px solid #666;
+	overflow: hidden;
+	padding: 10px 0;
+	text-align: center;
+}
+
+p.double {
+	padding: 40px 0px 39px 0px;
+}
+
+.container_12 {
+	background: #fff url(../../img/12_col.gif) repeat-y;
+	margin-bottom: 20px;
+}
+
+.container_16 {
+	background: #fff url(../../img/16_col.gif) repeat-y;
+	margin-bottom: 20px;
+}
+
+.container_24 {
+	background: #fff url(../../img/24_col.gif) repeat-y;
+}
\ No newline at end of file
diff --git a/code/css/uncompressed/reset.css b/code/css/uncompressed/reset.css
new file mode 100755
index 0000000..13f8e0a
--- /dev/null
+++ b/code/css/uncompressed/reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/code/css/uncompressed/text.css b/code/css/uncompressed/text.css
new file mode 100755
index 0000000..236d213
--- /dev/null
+++ b/code/css/uncompressed/text.css
@@ -0,0 +1,84 @@
+/*
+	960 Grid System ~ Text CSS.
+	Learn more ~ http://960.gs/
+
+	Licensed under GPL and MIT.
+*/
+
+/* `Basic HTML
+----------------------------------------------------------------------------------------------------*/
+
+body {
+	font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
+}
+
+a:focus {
+	outline: 1px dotted;
+}
+
+hr {
+	border: 0 #ccc solid;
+	border-top-width: 1px;
+	clear: both;
+	height: 0;
+}
+
+/* `Headings
+----------------------------------------------------------------------------------------------------*/
+
+h1 {
+	font-size: 25px;
+}
+
+h2 {
+	font-size: 23px;
+}
+
+h3 {
+	font-size: 21px;
+}
+
+h4 {
+	font-size: 19px;
+}
+
+h5 {
+	font-size: 17px;
+}
+
+h6 {
+	font-size: 15px;
+}
+
+/* `Spacing
+----------------------------------------------------------------------------------------------------*/
+
+ol {
+	list-style: decimal;
+}
+
+ul {
+	list-style: disc;
+}
+
+li {
+	margin-left: 30px;
+}
+
+p,
+dl,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+table,
+address,
+fieldset {
+	margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/code/demo.html b/code/demo.html
new file mode 100644
index 0000000..78f6a0b
--- /dev/null
+++ b/code/demo.html
@@ -0,0 +1,1126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<title>960 Grid System Plus &mdash; Demo</title>
+<link rel="stylesheet" href="css/reset.css" />
+<link rel="stylesheet" href="css/text.css" />
+<link rel="stylesheet" href="css/960.css" />
+<link rel="stylesheet" href="css/uncompressed/demo.css" />
+</head>
+<body>
+<h1>
+	<a href="http://960.gs/">960 Grid System Plus</a>
+</h1>
+<div class="container_12">
+	<h2>
+		12 Column Grid
+	</h2>
+	<div class="grid_12">
+		<p>
+			940
+		</p>
+	</div>
+	<!-- end .grid_12 -->
+	<div class="clear"></div>
+	<div class="grid_1">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1 -->
+	<div class="grid_11">
+		<p>
+			860
+		</p>
+	</div>
+	<!-- end .grid_11 -->
+	<div class="clear"></div>
+	<div class="grid_2">
+		<p>
+			140
+		</p>
+	</div>
+	<!-- end .grid_2 -->
+	<div class="grid_10">
+		<p>
+			780
+		</p>
+	</div>
+	<!-- end .grid_10 -->
+	<div class="clear"></div>
+	<div class="grid_3">
+		<p>
+			220
+		</p>
+	</div>
+	<!-- end .grid_3 -->
+	<div class="grid_9">
+		<p>
+			700
+		</p>
+	</div>
+	<!-- end .grid_9 -->
+	<div class="clear"></div>
+	<div class="grid_4">
+		<p>
+			300
+		</p>
+	</div>
+	<!-- end .grid_4 -->
+	<div class="grid_8">
+		<p>
+			620
+		</p>
+	</div>
+	<!-- end .grid_8 -->
+	<div class="clear"></div>
+	<div class="grid_5">
+		<p>
+			380
+		</p>
+	</div>
+	<!-- end .grid_5 -->
+	<div class="grid_7">
+		<p>
+			540
+		</p>
+	</div>
+	<!-- end .grid_7 -->
+	<div class="clear"></div>
+	<div class="grid_6">
+		<p>
+			460
+		</p>
+	</div>
+	<!-- end .grid_6 -->
+	<div class="grid_6">
+		<p>
+			460
+		</p>
+	</div>
+	<!-- end .grid_6 -->
+	<div class="clear"></div>
+	<div class="grid_1 suffix_11">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.suffix_11 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_1 suffix_10">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_1.suffix_10 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_2 suffix_9">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_2.suffix_9 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_3 suffix_8">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_3.suffix_8 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_4 suffix_7">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_4.suffix_7 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_5 suffix_6">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_5.suffix_6 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_6 suffix_5">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_6.suffix_5 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_7 suffix_4">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_7.suffix_4 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_8 suffix_3">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_8.suffix_3 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_9 suffix_2">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_9.suffix_2 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_10 suffix_1">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_10.suffix_1 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_11">
+		<p>
+			60
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_11 -->
+	<div class="clear"></div>
+	<div class="grid_6 push_6">
+		<div class="grid_1 alpha">
+			<p>
+				60
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_5 omega">
+			<p>
+				380
+			</p>
+		</div>
+		<!-- end .grid_5.omega -->
+		<div class="clear"></div>
+		<div class="grid_3 alpha">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_3.alpha -->
+		<div class="grid_3 omega">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_3.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_6.push_6 -->
+	<div class="grid_6 pull_6">
+		<div class="grid_3 alpha">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_3.alpha -->
+		<div class="grid_3 omega">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_3.omega -->
+		<div class="clear"></div>
+		<div class="grid_1 alpha">
+			<p>
+				60
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_5 omega">
+			<p>
+				380
+			</p>
+		</div>
+		<!-- end .grid_5.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_6.pull_6 -->
+	<div class="clear"></div>
+	<div class="grid-6">
+		<div class="grid_2">
+			<p class="double">
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_2">
+			<p class="double">
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_2">
+			<p class="double">
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-6 -->
+	<div class="grid-6">
+		<div class="grid_1">
+			<p>
+				60
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="grid_4">
+			<p>
+				300
+			</p>
+		</div>
+		<!-- end .grid_5 -->
+		<div class="grid_1">
+			<p>
+				60
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="clear"></div>
+		<div class="grid_2">
+			<p>
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_2">
+			<p>
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_2">
+			<p>
+				140
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-6 -->
+	<div class="clear"></div>
+</div>
+<!-- end .container_12 -->
+<div class="container_16">
+	<h2>
+		16 Column Grid
+	</h2>
+	<div class="grid_16">
+		<p>
+			940
+		</p>
+	</div>
+	<!-- end .grid_16 -->
+	<div class="clear"></div>
+	<div class="grid_1">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1 -->
+	<div class="grid_15">
+		<p>
+			880
+		</p>
+	</div>
+	<!-- end .grid_15 -->
+	<div class="clear"></div>
+	<div class="grid_2">
+		<p>
+			100
+		</p>
+	</div>
+	<!-- end .grid_2 -->
+	<div class="grid_14">
+		<p>
+			820
+		</p>
+	</div>
+	<!-- end .grid_14 -->
+	<div class="clear"></div>
+	<div class="grid_3">
+		<p>
+			160
+		</p>
+	</div>
+	<!-- end .grid_3 -->
+	<div class="grid_13">
+		<p>
+			760
+		</p>
+	</div>
+	<!-- end .grid_13 -->
+	<div class="clear"></div>
+	<div class="grid_4">
+		<p>
+			220
+		</p>
+	</div>
+	<!-- end .grid_4 -->
+	<div class="grid_12">
+		<p>
+			700
+		</p>
+	</div>
+	<!-- end .grid_12 -->
+	<div class="clear"></div>
+	<div class="grid_5">
+		<p>
+			280
+		</p>
+	</div>
+	<!-- end .grid_5 -->
+	<div class="grid_11">
+		<p>
+			640
+		</p>
+	</div>
+	<!-- end .grid_11 -->
+	<div class="clear"></div>
+	<div class="grid_6">
+		<p>
+			340
+		</p>
+	</div>
+	<!-- end .grid_6 -->
+	<div class="grid_10">
+		<p>
+			580
+		</p>
+	</div>
+	<!-- end .grid_10 -->
+	<div class="clear"></div>
+	<div class="grid_7">
+		<p>
+			400
+		</p>
+	</div>
+	<!-- end .grid_7 -->
+	<div class="grid_9">
+		<p>
+			520
+		</p>
+	</div>
+	<!-- end .grid_9 -->
+	<div class="clear"></div>
+	<div class="grid_8">
+		<p>
+			460
+		</p>
+	</div>
+	<!-- end .grid_8 -->
+	<div class="grid_8">
+		<p>
+			460
+		</p>
+	</div>
+	<!-- end .grid_8 -->
+	<div class="clear"></div>
+	<div class="grid_1 suffix_15">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.suffix_15 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_1 suffix_14">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_1.suffix_14 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_2 suffix_13">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_2.suffix_13 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_3 suffix_12">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_3.suffix_12 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_4 suffix_11">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_4.suffix_11 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_5 suffix_10">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_5.suffix_10 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_6 suffix_9">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_6.suffix_9 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_7 suffix_8">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_7.suffix_8 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_8 suffix_7">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_8.suffix_7 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_9 suffix_6">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_9.suffix_6 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_10 suffix_5">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_10.suffix_5 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_11 suffix_4">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_11.suffix_4 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_12 suffix_3">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_12.suffix_3 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_13 suffix_2">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_13.suffix_2 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_14 suffix_1">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_14.suffix_1 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_15">
+		<p>
+			40
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_15 -->
+	<div class="clear"></div>
+	<div class="grid_8 push_8">
+		<div class="grid_1 alpha">
+			<p>
+				40
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_7 omega">
+			<p>
+				400
+			</p>
+		</div>
+		<!-- end .grid_7.omega -->
+		<div class="clear"></div>
+		<div class="grid_4 alpha">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_4.alpha -->
+		<div class="grid_4 omega">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_4.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_8.push_8 -->
+	<div class="grid_8 pull_8">
+		<div class="grid_4 alpha">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_4.alpha -->
+		<div class="grid_4 omega">
+			<p>
+				220
+			</p>
+		</div>
+		<!-- end .grid_4.omega -->
+		<div class="clear"></div>
+		<div class="grid_1 alpha">
+			<p>
+				40
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_7 omega">
+			<p>
+				400
+			</p>
+		</div>
+		<!-- end .grid_7.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_8.pull_8 -->
+	<div class="clear"></div>
+	<div class="grid-8">
+		<div class="grid_3">
+			<p class="double">
+				160
+			</p>
+		</div>
+		<!-- end .grid_3 -->
+		<div class="grid_2">
+			<p class="double">
+				100
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_3">
+			<p class="double">
+				160
+			</p>
+		</div>
+		<!-- end .grid_3 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-8 -->
+	<div class="grid-8">
+		<div class="grid_1">
+			<p>
+				40
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="grid_6">
+			<p>
+				340
+			</p>
+		</div>
+		<!-- end .grid_6 -->
+		<div class="grid_1">
+			<p>
+				40
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="clear"></div>
+		<div class="grid_3">
+			<p>
+				160
+			</p>
+		</div>
+		<!-- end .grid_3 -->
+		<div class="grid_2">
+			<p>
+				100
+			</p>
+		</div>
+		<!-- end .grid_2 -->
+		<div class="grid_3">
+			<p>
+				160
+			</p>
+		</div>
+		<!-- end .grid_3 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-8 -->
+	
+	<div class="clear"></div>
+</div>
+<!-- end .container_16 -->
+<div class="container_24">
+	<h2>
+		24 Column Grid
+	</h2>
+	<div class="grid_24">
+		<p>
+			950
+		</p>
+	</div>
+	<!-- end .grid_24 -->
+	<div class="clear"></div>
+	<div class="grid_1">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1 -->
+	<div class="grid_23">
+		<p>
+			910
+		</p>
+	</div>
+	<!-- end .grid_23 -->
+	<div class="clear"></div>
+	<div class="grid_2">
+		<p>
+			70
+		</p>
+	</div>
+	<!-- end .grid_2 -->
+	<div class="grid_22">
+		<p>
+			870
+		</p>
+	</div>
+	<!-- end .grid_2 -->
+	<div class="clear"></div>
+	<div class="grid_3">
+		<p>
+			110
+		</p>
+	</div>
+	<!-- end .grid_3 -->
+	<div class="grid_21">
+		<p>
+			830
+		</p>
+	</div>
+	<!-- end .grid_21 -->
+	<div class="clear"></div>
+	<div class="grid_4">
+		<p>
+			150
+		</p>
+	</div>
+	<!-- end .grid_4 -->
+	<div class="grid_20">
+		<p>
+			790
+		</p>
+	</div>
+	<!-- end .grid_20 -->
+	<div class="clear"></div>
+	<div class="grid_5">
+		<p>
+			190
+		</p>
+	</div>
+	<!-- end .grid_5 -->
+	<div class="grid_19">
+		<p>
+			750
+		</p>
+	</div>
+	<!-- end .grid_19 -->
+	<div class="clear"></div>
+	<div class="grid_6">
+		<p>
+			230
+		</p>
+	</div>
+	<!-- end .grid_6 -->
+	<div class="grid_18">
+		<p>
+			710
+		</p>
+	</div>
+	<!-- end .grid_18 -->
+	<div class="clear"></div>
+	<div class="grid_7">
+		<p>
+			270
+		</p>
+	</div>
+	<!-- end .grid_7 -->
+	<div class="grid_17">
+		<p>
+			670
+		</p>
+	</div>
+	<!-- end .grid_17 -->
+	<div class="clear"></div>
+	<div class="grid_8">
+		<p>
+			310
+		</p>
+	</div>
+	<!-- end .grid_8 -->
+	<div class="grid_16">
+		<p>
+			630
+		</p>
+	</div>
+	<!-- end .grid_16 -->
+	<div class="clear"></div>
+	<div class="grid_9">
+		<p>
+			350
+		</p>
+	</div>
+	<!-- end .grid_9 -->
+	<div class="grid_15">
+		<p>
+			590
+		</p>
+	</div>
+	<!-- end .grid_15 -->
+	<div class="clear"></div>
+	<div class="grid_10">
+		<p>
+			390
+		</p>
+	</div>
+	<!-- end .grid_10 -->
+	<div class="grid_14">
+		<p>
+			550
+		</p>
+	</div>
+	<!-- end .grid_14 -->
+	<div class="clear"></div>
+	<div class="grid_11">
+		<p>
+			430
+		</p>
+	</div>
+	<!-- end .grid_11 -->
+	<div class="grid_13">
+		<p>
+			510
+		</p>
+	</div>
+	<!-- end .grid_13 -->
+	<div class="clear"></div>
+	<div class="grid_12">
+		<p>
+			470
+		</p>
+	</div>
+	<!-- end .grid_12 -->
+	<div class="grid_12">
+		<p>
+			470
+		</p>
+	</div>
+	<!-- end .grid_12 -->
+	<div class="clear"></div>
+	<div class="grid_1 suffix_23">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.suffix_23 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_1 suffix_22">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_1.suffix_22 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_2 suffix_21">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_2.suffix_21 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_3 suffix_20">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_3.suffix_20 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_4 suffix_19">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_4.suffix_19 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_5 suffix_18">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_5.suffix_18 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_6 suffix_17">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_6.suffix_17 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_7 suffix_16">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_7.suffix_16 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_8 suffix_15">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_8.suffix_15 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_9 suffix_14">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_9.suffix_14 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_10 suffix_13">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_10.suffix_13 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_11 suffix_12">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_11.suffix_12 -->
+	<div class="grid_1 prefix_12 suffix_11">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_12.suffix_11 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_13 suffix_10">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_13.suffix_10 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_14 suffix_9">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_14.suffix_9 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_15 suffix_8">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_15.suffix_8 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_16 suffix_7">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_16.suffix_7 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_17 suffix_6">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_17.suffix_6 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_18 suffix_5">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_18.suffix_5 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_19 suffix_4">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_19.suffix_4 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_20 suffix_3">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_20.suffix_3 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_21 suffix_2">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_21.suffix_2 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_22 suffix_1">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_22.suffix_1 -->
+	<div class="clear"></div>
+	<div class="grid_1 prefix_23">
+		<p>
+			30
+		</p>
+	</div>
+	<!-- end .grid_1.prefix_23 -->
+	<div class="clear"></div>
+	<div class="grid_12 push_12">
+		<div class="grid_6 alpha">
+			<p>
+				230
+			</p>
+		</div>
+		<!-- end .grid_6.alpha -->
+		<div class="grid_6 omega">
+			<p>
+				230
+			</p>
+		</div>
+		<!-- end .grid_6.omega -->
+		<div class="clear"></div>
+		<div class="grid_1 alpha">
+			<p>
+				30
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_11 omega">
+			<p>
+				430
+			</p>
+		</div>
+		<!-- end .grid_11.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_12.push_12 -->
+	<div class="grid_12 pull_12">
+		<div class="grid_1 alpha">
+			<p>
+				30
+			</p>
+		</div>
+		<!-- end .grid_1.alpha -->
+		<div class="grid_11 omega">
+			<p>
+				430
+			</p>
+		</div>
+		<!-- end .grid_11.omega -->
+		<div class="clear"></div>
+		<div class="grid_6 alpha">
+			<p>
+				230
+			</p>
+		</div>
+		<!-- end .grid_6.alpha -->
+		<div class="grid_6 omega">
+			<p>
+				230
+			</p>
+		</div>
+		<!-- end .grid_6.omega -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid_12.pull_12 -->
+	<div class="clear"></div>
+	<div class="grid-12">
+		<div class="grid_1">
+			<p class="double">
+				30
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="grid_10">
+			<p class="double">
+				390
+			</p>
+		</div>
+		<!-- end .grid_10 -->
+		<div class="grid_1">
+			<p class="double">
+				30
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-12 -->
+	<div class="grid-12">
+		<div class="grid_4">
+			<p>
+				150
+			</p>
+		</div>
+		<!-- end .grid_4 -->
+		<div class="grid_4">
+			<p>
+				150
+			</p>
+		</div>
+		<!-- end .grid_4 -->
+		<div class="grid_4">
+			<p>
+				150
+			</p>
+		</div>
+		<!-- end .grid_4 -->
+		<div class="clear"></div>
+		<div class="grid_1">
+			<p>
+				30
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="grid_10">
+			<p>
+				390
+			</p>
+		</div>
+		<!-- end .grid_10 -->
+		<div class="grid_1">
+			<p>
+				30
+			</p>
+		</div>
+		<!-- end .grid_1 -->
+		<div class="clear"></div>
+	</div>
+	<!-- end .grid-12 -->
+	<div class="clear"></div>
+</div>
+<!-- end .container_24 -->
+</body>
+</html>
\ No newline at end of file
diff --git a/code/img/12_col.gif b/code/img/12_col.gif
new file mode 100755
index 0000000000000000000000000000000000000000..52833df101b3c6bb996fb136504ff490f0fab8c5
GIT binary patch
literal 96
zcmZ?wbhEHbJiyGz(7?d(9|)d4Rs6}qz|QcWL5BedKr#$W<}LjTPrv0~oU`JV)#iJj
ys?M}N`ZD!E$FlC9E7zT<dcWqVc(41mso$^6`@q@gnAl%o@M{9w(~rRn4AubEGc8a6

literal 0
HcmV?d00001

diff --git a/code/img/16_col.gif b/code/img/16_col.gif
new file mode 100755
index 0000000000000000000000000000000000000000..93c1b1b3684c183b3afb96f1514f955fc3e1a0ec
GIT binary patch
literal 101
zcmZ?wbhEHbJiyGz(7?d(9|)d4Rs6}qz|QcWL5BedKr#$WHZA=NPrv1toK<qHJO8fP
z@AIt(+>?~Tm!03a^4+1Z_tL?eqsz-@s$1VT{?l+!QB%XDYJzfV+shiI#cF<x4AuY+
Ct0}_(

literal 0
HcmV?d00001

diff --git a/code/img/24_col.gif b/code/img/24_col.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d2f8db197a7f35aff931fd7b736eb6afcbbd604f
GIT binary patch
literal 105
zcmZ?wbhEHbJiyGz(7?d(|LN2J|NkrgWMN=u_|Krj00bZz1}29d-j%1{Rz9lSqNTaE
z%;H^rDaVga<&`rTcdg9H+BZ!*xa9273cYtV&$I6|3CM1|VXf5Ybzs5|9=F=dv7+T`
IJ-HaH0i7o+#{d8T

literal 0
HcmV?d00001

diff --git a/generator/generate-grid.rb b/generator/generate-grid.rb
new file mode 100755
index 0000000..b87c521
--- /dev/null
+++ b/generator/generate-grid.rb
@@ -0,0 +1,163 @@
+#! /usr/bin/env ruby
+
+require "yaml"
+grids = YAML.load_file(File.dirname(__FILE__) + "/grids.yml")
+
+classes = {}
+grids.each do |grid_name, value|
+  width = value["width"].to_i
+  cells = value["cells"].to_i
+  margin = value["margin"].to_i
+  cell_size = width / cells;
+  
+  # containers
+  key  = "\tmargin-left: auto;\n"
+  key << "\tmargin-right: auto;\n"
+  key << "\twidth: " + width.to_s + "px;\n"
+  val  = ".container_" + cells.to_s
+  classes[key] = [] if !classes.has_key?(key)
+  classes[key].push(val)
+  
+  # globals (with margin)
+  key  = "\tdisplay: inline;\n"
+  key << "\tfloat: left;\n"
+  key << "\tposition: relative;\n"
+  key << "\tmargin-left: " + margin.to_s + "px;\n"
+  key << "\tmargin-right: " + margin.to_s + "px;\n"
+  for i in 1..cells
+    val = ".container_" + cells.to_s + " .grid_" + i.to_s
+    classes[key] = [] if !classes.has_key?(key)
+    classes[key].push(val)
+  end
+
+  # globals (without margin)
+  key  = "\tdisplay: inline;\n"
+  key << "\tfloat: left;\n"
+  key << "\tposition: relative;\n"
+  key << "\tmargin-left: 0px;\n"
+  key << "\tmargin-right: 0px;\n"
+  for i in 1..cells
+    val = ".container_" + cells.to_s + " .grid-" + i.to_s
+    classes[key] = [] if !classes.has_key?(key)
+    classes[key].push(val)
+  end
+  
+  # grid_* (with margin)
+  for i in 1..cells
+    key = "\twidth: " + ((cell_size * i) - (margin * 2)).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .grid_" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+  # grid-* (without margin)
+  for i in 1..cells
+    key = "\twidth: " + (cell_size * i).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .grid-" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+  # prefix_*
+  for i in 1..(cells-1)
+    key = "\tpadding-left: " + ((cell_size) * i).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .prefix_" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+  # suffix_*
+  for i in 1..(cells-1)
+    key = "\tpadding-right: " + ((cell_size) * i).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .suffix_" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+  # push_*
+  for i in 1..(cells-1)
+    key = "\tleft: " + ((cell_size) * i).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .push_" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+  # pull_*
+  for i in 1..(cells-1)
+    key = "\tleft: -" + ((cell_size) * i).to_s + "px;\n"
+    val = ".container_" + cells.to_s + " .pull_" + i.to_s
+      classes[key] = [] if !classes.has_key?(key)
+      classes[key].push(val)
+  end
+  
+end
+
+
+
+# generate output
+output = <<-HTML
+
+/*
+  960 Grid System Plus.
+  -- Based on the 960 Grid System ~ http://960.gs/
+  
+  Licensed under MIT.
+*/
+
+/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+  margin-left: 0 !important;
+}
+
+.omega {
+  margin-right: 0 !important;
+}
+
+/* `Containers & Grids
+----------------------------------------------------------------------------------------------------*/
+
+HTML
+
+classes.sort{|a,b| a[1]<=>b[1]}.each do |key, value|
+  output << value.uniq.join(",\n") + " {\n"
+  output << key
+  output << "}\n"
+  output << "\n"
+end
+
+output << <<-HTML
+/* `Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+	clear: both;
+	display: block;
+	overflow: hidden;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
+.clearfix:after {
+	clear: both;
+	content: ' ';
+	display: block;
+	font-size: 0;
+	line-height: 0;
+	visibility: hidden;
+	width: 0;
+	height: 0;
+}
+
+* html .clearfix {
+	height: 1%;
+}
+HTML
+
+puts output
diff --git a/generator/grids.yml b/generator/grids.yml
new file mode 100644
index 0000000..3dd1727
--- /dev/null
+++ b/generator/grids.yml
@@ -0,0 +1,16 @@
+#
+# 960.gs+
+#
+
+grid_1:
+  width: 960
+  cells: 12
+  margin: 10
+grid_2:
+  width: 960
+  cells: 16
+  margin: 10
+grid_3:
+  width: 960
+  cells: 24
+  margin: 5