initial import

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