initial import

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+

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.

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/

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}

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}

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;
+}

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;
+}

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;
+}

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

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