Commits

Shu Zong Chen committed 66e4634

Added readme

Comments (0)

Files changed (1)

+less960
+=======
+
+[960 grid system](http://960.gs/) mixins for the [LESS](http://lesscss.org/)
+dynamic css stylesheet system.
+
+Purpose
+-------
+
+960gs is cool and all that, but you end up with all these superfluous classes
+all over your html markup. I get that 960gs is for prototyping, but it blows
+having another step to take after finalizing the design (and who does finalize
+designs? in my experience things get changed - often).  And still, odds are
+when you're prototyping a site you're already adding classes and whatnot in
+order to style particular blocks with particular lolcats.
+
+So why not take advantage of dynamic css and bring the joy and added
+productivity of simple layouts to a system that you can work on while
+prototyping and carry on into production?
+
+Usage
+-----
+
+The 960gs classes are offered as mixins, to be utilized in your .less code
+
+### Import
+
+Copy ninesixty.less into your directory of less scripts and it is as simple as:
+
+    @import 'ninesixty';
+
+### Grid Placement
+
+The 960gs container and grid classes:
+
+    header{
+      .container(12);
+      div{
+        .grid(4, 12);
+      }
+    }
+    article{
+      .container(16);
+      div{
+        .grid(4, 16);
+      }
+    }
+    footer{
+      .container(12);
+      div{
+        .grid(2, 12);
+        .push(2, 12);
+      }
+    }
+
+Note that the grid mixin requires you to pass in columns of the parent
+container as the second argument. Someone let me know if there's a
+better way to obtain this information.
+
+### Prefix/Suffix and Push/Pull
+
+Prefixes and suffixes insert empty space before and after a grid unit:
+
+		.block{
+			.grid(4, 16);
+			.suffix(2, 16);
+		}
+
+		.block{
+			.grid(4, 16);
+			.suffix(2, 16);
+		}
+
+Push and pull move a block left or right:
+
+		.block{
+			.grid(4, 16);
+			.push(2, 16);
+		}
+
+### Grid Children
+
+In 960 grid children need alpha or omega class to keep the inside
+padding from going too crazy:
+
+		.block{
+			.grid(1, 16);
+      .alpha();
+		}
+
+		.block{
+			.grid(1, 16);
+      .omega();
+		}
+
+Yeah, you need to add those classes to the first/last element, but
+until all browsers get better support for that in css, this is
+the best we can do.
+
+