New grid system for layout prototypes

src/stylesheets/Lungo.layout.grid.less

@@ -0,0 +1,48 @@
+.row {
+    width: 100%;
+    margin: 0 auto;
+    *zoom: 1;
+
+    &:before, &:after {
+        content: "";
+        display: table;
+    }
+    &:after { clear: both; }
+
+    &.one   { height: 10%; }
+    &.two   { height: 20%; }
+    &.three { height: 30%; }
+    &.four  { height: 40%; }
+    &.five  { height: 50%; }
+    &.six   { height: 60%; }
+    &.seven { height: 70%; }
+    &.eight { height: 80%; }
+    &.nine  { height: 90%; }
+    &.ten   { height: 100%; }
+}
+
+.column, .columns {
+    float: left;
+    position: relative;
+    display: block;
+    height: 100%;
+
+    &.centered {
+        float: none;
+        margin: 0 auto;
+    }
+
+    &.one   { width: 10%; }
+    &.two   { width: 20%; }
+    &.three { width: 30%; }
+    &.four  { width: 40%; }
+    &.five  { width: 50%; }
+    &.six   { width: 60%; }
+    &.seven { width: 70%; }
+    &.eight { width: 80%; }
+    &.nine  { width: 90%; }
+    &.ten   { width: 100%; }
+}
+
+[class*="column"] + [class*="column"]:last-child { float: right; }
+[class*="column"] + [class*="column"].end { float: left; }

src/stylesheets/css/Lungo.layout.grid.css

@@ -0,0 +1,101 @@
+.row {
+  width: 100%;
+  margin: 0 auto;
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  content: "";
+  display: table;
+}
+.row:after {
+  clear: both;
+}
+.row.one {
+  height: 10%;
+}
+.row.two {
+  height: 20%;
+}
+.row.three {
+  height: 30%;
+}
+.row.four {
+  height: 40%;
+}
+.row.five {
+  height: 50%;
+}
+.row.six {
+  height: 60%;
+}
+.row.seven {
+  height: 70%;
+}
+.row.eight {
+  height: 80%;
+}
+.row.nine {
+  height: 90%;
+}
+.row.ten {
+  height: 100%;
+}
+.column,
+.columns {
+  float: left;
+  position: relative;
+  display: block;
+  height: 100%;
+}
+.column.centered,
+.columns.centered {
+  float: none;
+  margin: 0 auto;
+}
+.column.one,
+.columns.one {
+  width: 10%;
+}
+.column.two,
+.columns.two {
+  width: 20%;
+}
+.column.three,
+.columns.three {
+  width: 30%;
+}
+.column.four,
+.columns.four {
+  width: 40%;
+}
+.column.five,
+.columns.five {
+  width: 50%;
+}
+.column.six,
+.columns.six {
+  width: 60%;
+}
+.column.seven,
+.columns.seven {
+  width: 70%;
+}
+.column.eight,
+.columns.eight {
+  width: 80%;
+}
+.column.nine,
+.columns.nine {
+  width: 90%;
+}
+.column.ten,
+.columns.ten {
+  width: 100%;
+}
+[class*="column"] + [class*="column"]:last-child {
+  float: right;
+}
+[class*="column"] + [class*="column"].end {
+  float: left;
+}