picasso 0.5.2 → 0.6.0

data/docs/picasso-utils-_grid.html

@@ -1911,17 +1911,26 @@ body {
 .row-col [class^="col"]:first-child {
   margin-left: 0;
 }
+.row-col [class*="pull"], .row-col [class*="push"] {
+  position: relative;
+}
 .row-col .col1 {
   width: 6.34058%;
 }
 .ie7 .row-col .col1 {
   width: 6.24858%;
 }
-.row-col [class^="col"].offset1 {
-  margin-left: 10.50725%;
+.row-col .offset1,
+.row-col .offset1:first-child {
+  margin-left: 6.34058%;
+}
+.row-col .push1,
+.row-col .push1:first-child {
+  left: 8.51449%;
 }
-.row-col [class^="col"].offset1:first-child {
-  margin-left: 8.42391%;
+.row-col .pull1,
+.row-col .pull1:first-child {
+  left: -8.51449%;
 }
 .row-col .col2 {
   width: 14.85507%;
@@ -1929,11 +1938,17 @@ body {
 .ie7 .row-col .col2 {
   width: 14.76307%;
 }
-.row-col [class^="col"].offset2 {
-  margin-left: 19.02174%;
+.row-col .offset2,
+.row-col .offset2:first-child {
+  margin-left: 14.85507%;
 }
-.row-col [class^="col"].offset2:first-child {
-  margin-left: 16.93841%;
+.row-col .push2,
+.row-col .push2:first-child {
+  left: 17.02899%;
+}
+.row-col .pull2,
+.row-col .pull2:first-child {
+  left: -17.02899%;
 }
 .row-col .col3 {
   width: 23.36957%;
@@ -1941,11 +1956,17 @@ body {
 .ie7 .row-col .col3 {
   width: 23.27757%;
 }
-.row-col [class^="col"].offset3 {
-  margin-left: 27.53623%;
+.row-col .offset3,
+.row-col .offset3:first-child {
+  margin-left: 23.36957%;
+}
+.row-col .push3,
+.row-col .push3:first-child {
+  left: 25.54348%;
 }
-.row-col [class^="col"].offset3:first-child {
-  margin-left: 25.4529%;
+.row-col .pull3,
+.row-col .pull3:first-child {
+  left: -25.54348%;
 }
 .row-col .col4 {
   width: 31.88406%;
@@ -1953,11 +1974,17 @@ body {
 .ie7 .row-col .col4 {
   width: 31.79206%;
 }
-.row-col [class^="col"].offset4 {
-  margin-left: 36.05072%;
+.row-col .offset4,
+.row-col .offset4:first-child {
+  margin-left: 31.88406%;
 }
-.row-col [class^="col"].offset4:first-child {
-  margin-left: 33.96739%;
+.row-col .push4,
+.row-col .push4:first-child {
+  left: 34.05797%;
+}
+.row-col .pull4,
+.row-col .pull4:first-child {
+  left: -34.05797%;
 }
 .row-col .col5 {
   width: 40.39855%;
@@ -1965,11 +1992,17 @@ body {
 .ie7 .row-col .col5 {
   width: 40.30655%;
 }
-.row-col [class^="col"].offset5 {
-  margin-left: 44.56522%;
+.row-col .offset5,
+.row-col .offset5:first-child {
+  margin-left: 40.39855%;
+}
+.row-col .push5,
+.row-col .push5:first-child {
+  left: 42.57246%;
 }
-.row-col [class^="col"].offset5:first-child {
-  margin-left: 42.48188%;
+.row-col .pull5,
+.row-col .pull5:first-child {
+  left: -42.57246%;
 }
 .row-col .col6 {
   width: 48.91304%;
@@ -1977,11 +2010,17 @@ body {
 .ie7 .row-col .col6 {
   width: 48.82104%;
 }
-.row-col [class^="col"].offset6 {
-  margin-left: 53.07971%;
+.row-col .offset6,
+.row-col .offset6:first-child {
+  margin-left: 48.91304%;
+}
+.row-col .push6,
+.row-col .push6:first-child {
+  left: 51.08696%;
 }
-.row-col [class^="col"].offset6:first-child {
-  margin-left: 50.99638%;
+.row-col .pull6,
+.row-col .pull6:first-child {
+  left: -51.08696%;
 }
 .row-col .col7 {
   width: 57.42754%;
@@ -1989,11 +2028,17 @@ body {
 .ie7 .row-col .col7 {
   width: 57.33554%;
 }
-.row-col [class^="col"].offset7 {
-  margin-left: 61.5942%;
+.row-col .offset7,
+.row-col .offset7:first-child {
+  margin-left: 57.42754%;
 }
-.row-col [class^="col"].offset7:first-child {
-  margin-left: 59.51087%;
+.row-col .push7,
+.row-col .push7:first-child {
+  left: 59.60145%;
+}
+.row-col .pull7,
+.row-col .pull7:first-child {
+  left: -59.60145%;
 }
 .row-col .col8 {
   width: 65.94203%;
@@ -2001,11 +2046,17 @@ body {
 .ie7 .row-col .col8 {
   width: 65.85003%;
 }
-.row-col [class^="col"].offset8 {
-  margin-left: 70.1087%;
+.row-col .offset8,
+.row-col .offset8:first-child {
+  margin-left: 65.94203%;
+}
+.row-col .push8,
+.row-col .push8:first-child {
+  left: 68.11594%;
 }
-.row-col [class^="col"].offset8:first-child {
-  margin-left: 68.02536%;
+.row-col .pull8,
+.row-col .pull8:first-child {
+  left: -68.11594%;
 }
 .row-col .col9 {
   width: 74.45652%;
@@ -2013,11 +2064,17 @@ body {
 .ie7 .row-col .col9 {
   width: 74.36452%;
 }
-.row-col [class^="col"].offset9 {
-  margin-left: 78.62319%;
+.row-col .offset9,
+.row-col .offset9:first-child {
+  margin-left: 74.45652%;
 }
-.row-col [class^="col"].offset9:first-child {
-  margin-left: 76.53986%;
+.row-col .push9,
+.row-col .push9:first-child {
+  left: 76.63043%;
+}
+.row-col .pull9,
+.row-col .pull9:first-child {
+  left: -76.63043%;
 }
 .row-col .col10 {
   width: 82.97101%;
@@ -2025,11 +2082,17 @@ body {
 .ie7 .row-col .col10 {
   width: 82.87901%;
 }
-.row-col [class^="col"].offset10 {
-  margin-left: 87.13768%;
+.row-col .offset10,
+.row-col .offset10:first-child {
+  margin-left: 82.97101%;
+}
+.row-col .push10,
+.row-col .push10:first-child {
+  left: 85.14493%;
 }
-.row-col [class^="col"].offset10:first-child {
-  margin-left: 85.05435%;
+.row-col .pull10,
+.row-col .pull10:first-child {
+  left: -85.14493%;
 }
 .row-col .col11 {
   width: 91.48551%;
@@ -2037,20 +2100,671 @@ body {
 .ie7 .row-col .col11 {
   width: 91.39351%;
 }
-.row-col [class^="col"].offset11 {
-  margin-left: 95.65217%;
+.row-col .offset11,
+.row-col .offset11:first-child {
+  margin-left: 91.48551%;
+}
+.row-col .push11,
+.row-col .push11:first-child {
+  left: 93.65942%;
 }
-.row-col [class^="col"].offset11:first-child {
-  margin-left: 93.56884%;
+.row-col .pull11,
+.row-col .pull11:first-child {
+  left: -93.65942%;
 }
 .row-col .col12 {
   width: 100%;
 }
-.row-col [class^="col"].offset12 {
-  margin-left: 104.16667%;
+.row-col .offset12,
+.row-col .offset12:first-child {
+  margin-left: 100%;
 }
-.row-col [class^="col"].offset12:first-child {
-  margin-left: 102.08333%;
+.row-col .push12,
+.row-col .push12:first-child {
+  left: 102.17391%;
+}
+.row-col .pull12,
+.row-col .pull12:first-child {
+  left: -102.17391%;
+}
+.row-col .first {
+  margin-left: 0;
+}
+.row-col .col0 {
+  display: none;
+}
+.row-col .centered,
+.row-col .centered:first-child {
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+}
+@media (max-width: 480px) {
+  .row-col [class^="col-small"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-small"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-small {
+    width: 6.34058%;
+  }
+  .row-col .offset1-small,
+  .row-col .offset1-small:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-small,
+  .row-col .push1-small:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-small,
+  .row-col .pull1-small:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-small {
+    width: 14.85507%;
+  }
+  .row-col .offset2-small,
+  .row-col .offset2-small:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-small,
+  .row-col .push2-small:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-small,
+  .row-col .pull2-small:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-small {
+    width: 23.36957%;
+  }
+  .row-col .offset3-small,
+  .row-col .offset3-small:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-small,
+  .row-col .push3-small:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-small,
+  .row-col .pull3-small:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-small {
+    width: 31.88406%;
+  }
+  .row-col .offset4-small,
+  .row-col .offset4-small:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-small,
+  .row-col .push4-small:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-small,
+  .row-col .pull4-small:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-small {
+    width: 40.39855%;
+  }
+  .row-col .offset5-small,
+  .row-col .offset5-small:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-small,
+  .row-col .push5-small:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-small,
+  .row-col .pull5-small:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-small {
+    width: 48.91304%;
+  }
+  .row-col .offset6-small,
+  .row-col .offset6-small:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-small,
+  .row-col .push6-small:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-small,
+  .row-col .pull6-small:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-small {
+    width: 57.42754%;
+  }
+  .row-col .offset7-small,
+  .row-col .offset7-small:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-small,
+  .row-col .push7-small:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-small,
+  .row-col .pull7-small:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-small {
+    width: 65.94203%;
+  }
+  .row-col .offset8-small,
+  .row-col .offset8-small:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-small,
+  .row-col .push8-small:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-small,
+  .row-col .pull8-small:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-small {
+    width: 74.45652%;
+  }
+  .row-col .offset9-small,
+  .row-col .offset9-small:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-small,
+  .row-col .push9-small:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-small,
+  .row-col .pull9-small:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-small {
+    width: 82.97101%;
+  }
+  .row-col .offset10-small,
+  .row-col .offset10-small:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-small,
+  .row-col .push10-small:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-small,
+  .row-col .pull10-small:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-small {
+    width: 91.48551%;
+  }
+  .row-col .offset11-small,
+  .row-col .offset11-small:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-small,
+  .row-col .push11-small:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-small,
+  .row-col .pull11-small:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-small {
+    width: 100%;
+  }
+  .row-col .offset12-small,
+  .row-col .offset12-small:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-small,
+  .row-col .push12-small:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-small,
+  .row-col .pull12-small:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-small {
+    margin-left: 0;
+  }
+  .row-col .col0-small {
+    display: none;
+  }
+  .row-col .centered-small,
+  .row-col .centered-small:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+}
+@media (min-width: 481px) and (max-width: 800px) {
+  .row-col [class^="col-medium"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-medium"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-medium {
+    width: 6.34058%;
+  }
+  .row-col .offset1-medium,
+  .row-col .offset1-medium:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-medium,
+  .row-col .push1-medium:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-medium,
+  .row-col .pull1-medium:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-medium {
+    width: 14.85507%;
+  }
+  .row-col .offset2-medium,
+  .row-col .offset2-medium:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-medium,
+  .row-col .push2-medium:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-medium,
+  .row-col .pull2-medium:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-medium {
+    width: 23.36957%;
+  }
+  .row-col .offset3-medium,
+  .row-col .offset3-medium:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-medium,
+  .row-col .push3-medium:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-medium,
+  .row-col .pull3-medium:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-medium {
+    width: 31.88406%;
+  }
+  .row-col .offset4-medium,
+  .row-col .offset4-medium:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-medium,
+  .row-col .push4-medium:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-medium,
+  .row-col .pull4-medium:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-medium {
+    width: 40.39855%;
+  }
+  .row-col .offset5-medium,
+  .row-col .offset5-medium:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-medium,
+  .row-col .push5-medium:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-medium,
+  .row-col .pull5-medium:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-medium {
+    width: 48.91304%;
+  }
+  .row-col .offset6-medium,
+  .row-col .offset6-medium:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-medium,
+  .row-col .push6-medium:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-medium,
+  .row-col .pull6-medium:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-medium {
+    width: 57.42754%;
+  }
+  .row-col .offset7-medium,
+  .row-col .offset7-medium:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-medium,
+  .row-col .push7-medium:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-medium,
+  .row-col .pull7-medium:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-medium {
+    width: 65.94203%;
+  }
+  .row-col .offset8-medium,
+  .row-col .offset8-medium:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-medium,
+  .row-col .push8-medium:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-medium,
+  .row-col .pull8-medium:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-medium {
+    width: 74.45652%;
+  }
+  .row-col .offset9-medium,
+  .row-col .offset9-medium:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-medium,
+  .row-col .push9-medium:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-medium,
+  .row-col .pull9-medium:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-medium {
+    width: 82.97101%;
+  }
+  .row-col .offset10-medium,
+  .row-col .offset10-medium:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-medium,
+  .row-col .push10-medium:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-medium,
+  .row-col .pull10-medium:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-medium {
+    width: 91.48551%;
+  }
+  .row-col .offset11-medium,
+  .row-col .offset11-medium:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-medium,
+  .row-col .push11-medium:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-medium,
+  .row-col .pull11-medium:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-medium {
+    width: 100%;
+  }
+  .row-col .offset12-medium,
+  .row-col .offset12-medium:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-medium,
+  .row-col .push12-medium:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-medium,
+  .row-col .pull12-medium:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-medium {
+    margin-left: 0;
+  }
+  .row-col .col0-medium {
+    display: none;
+  }
+  .row-col .centered-medium,
+  .row-col .centered-medium:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+}
+@media (min-width: 801px) and (max-width: 1024px) {
+  .row-col [class^="col-large"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-large"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-large {
+    width: 6.34058%;
+  }
+  .row-col .offset1-large,
+  .row-col .offset1-large:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-large,
+  .row-col .push1-large:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-large,
+  .row-col .pull1-large:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-large {
+    width: 14.85507%;
+  }
+  .row-col .offset2-large,
+  .row-col .offset2-large:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-large,
+  .row-col .push2-large:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-large,
+  .row-col .pull2-large:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-large {
+    width: 23.36957%;
+  }
+  .row-col .offset3-large,
+  .row-col .offset3-large:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-large,
+  .row-col .push3-large:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-large,
+  .row-col .pull3-large:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-large {
+    width: 31.88406%;
+  }
+  .row-col .offset4-large,
+  .row-col .offset4-large:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-large,
+  .row-col .push4-large:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-large,
+  .row-col .pull4-large:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-large {
+    width: 40.39855%;
+  }
+  .row-col .offset5-large,
+  .row-col .offset5-large:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-large,
+  .row-col .push5-large:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-large,
+  .row-col .pull5-large:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-large {
+    width: 48.91304%;
+  }
+  .row-col .offset6-large,
+  .row-col .offset6-large:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-large,
+  .row-col .push6-large:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-large,
+  .row-col .pull6-large:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-large {
+    width: 57.42754%;
+  }
+  .row-col .offset7-large,
+  .row-col .offset7-large:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-large,
+  .row-col .push7-large:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-large,
+  .row-col .pull7-large:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-large {
+    width: 65.94203%;
+  }
+  .row-col .offset8-large,
+  .row-col .offset8-large:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-large,
+  .row-col .push8-large:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-large,
+  .row-col .pull8-large:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-large {
+    width: 74.45652%;
+  }
+  .row-col .offset9-large,
+  .row-col .offset9-large:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-large,
+  .row-col .push9-large:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-large,
+  .row-col .pull9-large:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-large {
+    width: 82.97101%;
+  }
+  .row-col .offset10-large,
+  .row-col .offset10-large:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-large,
+  .row-col .push10-large:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-large,
+  .row-col .pull10-large:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-large {
+    width: 91.48551%;
+  }
+  .row-col .offset11-large,
+  .row-col .offset11-large:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-large,
+  .row-col .push11-large:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-large,
+  .row-col .pull11-large:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-large {
+    width: 100%;
+  }
+  .row-col .offset12-large,
+  .row-col .offset12-large:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-large,
+  .row-col .push12-large:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-large,
+  .row-col .pull12-large:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-large {
+    margin-left: 0;
+  }
+  .row-col .col0-large {
+    display: none;
+  }
+  .row-col .centered-large,
+  .row-col .centered-large:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
 }
 
 .row-col {
@@ -2375,11 +3089,12 @@ body {
 </a></li></ul></li></ul></nav></aside><section class="content"><article id="" class="section"><div class="docs"><h2>Grid</h2>
 <p> Grilla responsiva a 12 columnas (o mas).
 </p>
+<h4>Manejo de columnas y filas</h4>
 <p> Cada set de columnas tiene un ancho porcentual. El elemento que haga uso de un espacio debe tener la clase <code>colX</code>, 
  en donde <em>X</em> es el n&uacute;mero de columnas a ocupar. Las columnas definidas siempre deben estar contenidas por un elemento con la clase <code>row-col</code>.
+ En caso de utilizar la clase <code>col0</code> la misma quedará oculta.
 </p>
-<h3>Ejemplos</h3>
-<h4>Sim&eacute;trico</h4>
+<h5>Ejemplo1: Sim&eacute;trico</h5>
 <div class="preview"> <div class="row-col">
      <div class="col1">col1</div>
      <div class="col1">col1</div>
@@ -2459,7 +3174,7 @@ body {
  &lt;div class=&quot;row-col&quot;&gt;
      &lt;div class=&quot;col12&quot;&gt;col12&lt;/div&gt;
  &lt;/div&gt;</code></pre>
-<h4>Asim&eacute;trico</h4>
+<h5>Ejemplo2: Asim&eacute;trico</h5>
 <div class="preview"> <div class="row-col">
      <div class="col5">col5</div>
      <div class="col7">col7</div>
@@ -2499,7 +3214,7 @@ body {
      &lt;div class=&quot;col1&quot;&gt;col1&lt;/div&gt;
      &lt;div class=&quot;col11&quot;&gt;col11&lt;/div&gt;
  &lt;/div&gt;</code></pre>
-<h4>Anidado</h4>
+<h5>Ejemplo3: Anidado</h5>
 <div class="preview"> <div class="row-col">
      <div class="col12">col12
          <div class="row-col">
@@ -2575,59 +3290,239 @@ body {
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
+<h4>Clases responsivas</h4>
+<p> La grilla ofrece una serie de clases para poder manejar el comportamiento de las columnas ante diferentes resoluciones. 
+ Las clases disponibles son: <code>colX-small</code> (máximo 480px), <code>colX-medium</code> (entre 481px y 800px) y <code>colX-large</code> (entre 801px y 1024px):
+</p>
+<h5>Ejemplo 1</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>12 columnas de 1 unidad</li>
+<li>Large: 10 columnas de 1 unidad</li>
+<li>Medium: 8 columnas de 1 unidad</li>
+<li>Small: 6 columnas de 1 unidad</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col1">1</div>
+     <div class="col1">2</div>
+     <div class="col1">3</div>
+     <div class="col1">4</div>
+     <div class="col1">5</div>
+     <div class="col1">6</div>
+     <div class="col1 col0-small">7</div>
+     <div class="col1 col0-small">8</div>
+     <div class="col1 col0-medium col0-small">9</div>
+     <div class="col1 col0-medium col0-small">10</div>
+     <div class="col1 col0-large col0-medium col0-small">11</div>
+     <div class="col1 col0-large col0-medium col0-small">12</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col1&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col1&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col1&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col1&quot;&gt;4&lt;/div&gt;
+     &lt;div class=&quot;col1&quot;&gt;5&lt;/div&gt;
+     &lt;div class=&quot;col1&quot;&gt;6&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-small&quot;&gt;7&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-small&quot;&gt;8&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-medium col0-small&quot;&gt;9&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-medium col0-small&quot;&gt;10&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;11&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;12&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h5>Ejemplo 2</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>12 columnas de 1 unidad</li>
+<li>Large: 6 columnas de 2 unidades</li>
+<li>Medium: 4 columnas de 3 unidades</li>
+<li>Small: 2 columnas de 6 unidades</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col1 col2-large col3-medium col6-small">1</div>
+     <div class="col1 col2-large col3-medium col6-small">2</div>
+     <div class="col1 col2-large col3-medium col0-small">3</div>
+     <div class="col1 col2-large col3-medium col0-small">4</div>
+     <div class="col1 col2-large col0-medium col0-small">5</div>
+     <div class="col1 col2-large col0-medium col0-small">6</div>
+     <div class="col1 col0-large col0-medium col0-small">7</div>
+     <div class="col1 col0-large col0-medium col0-small">8</div>
+     <div class="col1 col0-large col0-medium col0-small">9</div>
+     <div class="col1 col0-large col0-medium col0-small">10</div>
+     <div class="col1 col0-large col0-medium col0-small">11</div>
+     <div class="col1 col0-large col0-medium col0-small">12</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col1 col2-large col3-medium col6-small&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col1 col2-large col3-medium col6-small&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col1 col2-large col3-medium col0-small&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col1 col2-large col3-medium col0-small&quot;&gt;4&lt;/div&gt;
+     &lt;div class=&quot;col1 col2-large col0-medium col0-small&quot;&gt;5&lt;/div&gt;
+     &lt;div class=&quot;col1 col2-large col0-medium col0-small&quot;&gt;6&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;7&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;8&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;9&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;10&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;11&lt;/div&gt;
+     &lt;div class=&quot;col1 col0-large col0-medium col0-small&quot;&gt;12&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h5>Ejemplo 3</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>4 columnas de 3 unidades</li>
+<li>Large: 3 columnas de 4 unidades (la primera columna debe ser 2)</li>
+<li>Medium: 2 columnas de 6 unidades (la primera columna debe ser 3)</li>
+<li>Small: 1 columna de 12 unidades (la única columna debe ser 4)</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col3 col0-large col0-medium col0-small">1</div>
+     <div class="col3 col4-large first-large col0-medium col0-small">2</div>
+     <div class="col3 col4-large col6-medium first-medium col0-small">3</div>
+     <div class="col3 col4-large col6-medium col12-small first-small">4</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col3 col0-large col0-medium col0-small&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col3 col4-large first-large col0-medium col0-small&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col3 col4-large col6-medium first-medium col0-small&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col3 col4-large col6-medium col12-small first-small&quot;&gt;4&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<blockquote>
+<p>Notar que se utiliza la clase <code>first-&lt;size&gt;</code>. 
+ La misma permite aplicar aplicar a una columna que no es primera como si lo fuera. 
+ Caso contrario la misma tendrá un margen izquierdo por defecto.
+</p>
+</blockquote>
 <h4>Offset</h4>
-<p> La grilla ofrece la psibilidad de utilizar offsets, los mismos se manejan a trav&eacute;s de la clase <code>offsetX</code>:
+<p> La grilla ofrece la posibilidad de utilizar aplicar márgenes, los mismos se manejan a trav&eacute;s de la clase <code>offsetX</code>. 
+ A su vez también se encuentran disponibles clases para el manejo de offsets ante diferentes resoluciones. 
+ Las clases disponibles son: <code>offsetX-small</code>, <code>offsetX-medium</code> y <code>offsetX-large</code>:
 </p>
+<h5>Ejemplo 1</h5>
+<ul>
+<li>4 columnas de 1 unidad separadas cada una por 2 unidades</li>
+</ul>
 <div class="preview"> <div class="row-col">
-     <div class="col1">col1</div>
-     <div class="col2 offset1">col2 offset1</div>
-     <div class="col2 offset1">col2 offset1</div>
-     <div class="col2 offset1">col2 offset1</div>
-     <div class="col1 offset1">col1 1</div>
- </div>
- <div class="row-col">
-     <div class="col2">col2</div>
-     <div class="col4 offset2">col2 offset2</div>
-     <div class="col2 offset2">col2 offset2</div>
- </div>
- <div class="row-col">
-     <div class="col4">col4</div>
-     <div class="col2 offset1">col2 offset1</div>
-     <div class="col4 offset1">col4 offset1</div>
- </div>
- <div class="row-col">
-     <div class="col5">col5</div>
-     <div class="col5 offset2">col5 offset2</div>
- </div>
- <div class="row-col">
-     <div class="col1 offset2">col1 2</div>
-     <div class="col2 offset2">col1 offset2</div>
-     <div class="col1 offset2">col1 2</div>
+     <div class="col1 offset2">1</div>
+     <div class="col1 offset2">2</div>
+     <div class="col1 offset2">3</div>
+     <div class="col1 offset2">4</div>
  </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
-     &lt;div class=&quot;col1&quot;&gt;col1&lt;/div&gt;
-     &lt;div class=&quot;col2 offset1&quot;&gt;col2 offset1&lt;/div&gt;
-     &lt;div class=&quot;col2 offset1&quot;&gt;col2 offset1&lt;/div&gt;
-     &lt;div class=&quot;col2 offset1&quot;&gt;col2 offset1&lt;/div&gt;
-     &lt;div class=&quot;col1 offset1&quot;&gt;col1 1&lt;/div&gt;
- &lt;/div&gt;
- &lt;div class=&quot;row-col&quot;&gt;
-     &lt;div class=&quot;col2&quot;&gt;col2&lt;/div&gt;
-     &lt;div class=&quot;col4 offset2&quot;&gt;col2 offset2&lt;/div&gt;
-     &lt;div class=&quot;col2 offset2&quot;&gt;col2 offset2&lt;/div&gt;
- &lt;/div&gt;
- &lt;div class=&quot;row-col&quot;&gt;
-     &lt;div class=&quot;col4&quot;&gt;col4&lt;/div&gt;
-     &lt;div class=&quot;col2 offset1&quot;&gt;col2 offset1&lt;/div&gt;
-     &lt;div class=&quot;col4 offset1&quot;&gt;col4 offset1&lt;/div&gt;
- &lt;/div&gt;
- &lt;div class=&quot;row-col&quot;&gt;
-     &lt;div class=&quot;col5&quot;&gt;col5&lt;/div&gt;
-     &lt;div class=&quot;col5 offset2&quot;&gt;col5 offset2&lt;/div&gt;
- &lt;/div&gt;
- &lt;div class=&quot;row-col&quot;&gt;
-     &lt;div class=&quot;col1 offset2&quot;&gt;col1 2&lt;/div&gt;
-     &lt;div class=&quot;col2 offset2&quot;&gt;col1 offset2&lt;/div&gt;
-     &lt;div class=&quot;col1 offset2&quot;&gt;col1 2&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2&quot;&gt;4&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h5>Ejemplo 2</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>4 columnas de 1 unidad separadas cada una por 2 unidades</li>
+<li>Large: 3 columnas de 1 unidad separadas cada una por 3 unidades</li>
+<li>Medium: 2 columnas de 1 unidad separadas cada una por 5 unidades</li>
+<li>Small: 1 columna de 1 unidad separada a 11 unidades</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col1 offset2 offset3-large offset5-medium offset11-small">1</div>
+     <div class="col1 offset2 offset3-large offset5-medium col0-small">2</div>
+     <div class="col1 offset2 offset3-large col0-medium col0-small">3</div>
+     <div class="col1 offset2 col0-large col0-medium col0-small">4</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col1 offset2 offset3-large offset5-medium offset11-small&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2 offset3-large offset5-medium col0-small&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2 offset3-large col0-medium col0-small&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col1 offset2 col0-large col0-medium col0-small&quot;&gt;4&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h4>Pull / Push</h4>
+<p> La grilla ofrece la posibilidad de utilizar posicionamiento relativo, los mismos se manejan a trav&eacute;s de las clases <code>pullX</code> y <code>pushX</code>. 
+ A su vez también se encuentran disponibles clases para el manejo de posiciones ante diferentes resoluciones. 
+ Las clases disponibles son: <code>pullX-small</code>/<code>pushX-small</code>, <code>pullX-medium</code>/<code>pushX-medium</code> y <code>pullX-large</code>/<code>pushX-large</code>:
+</p>
+<h5>Ejemplo 1</h5>
+<ul>
+<li>2 columnas de 6 unidades (orden inverso)</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col6 push6">1</div>
+     <div class="col6 pull6">2</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col6 push6&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col6 pull6&quot;&gt;2&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h5>Ejemplo 2</h5>
+<ul>
+<li>12 columnas de 1 unidad (orden inverso)</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col1 push11">1</div>
+     <div class="col1 push9">2</div>
+     <div class="col1 push7">3</div>
+     <div class="col1 push5">4</div>
+     <div class="col1 push3">5</div>
+     <div class="col1 push1">6</div>
+     <div class="col1 pull1">7</div>
+     <div class="col1 pull3">8</div>
+     <div class="col1 pull5">9</div>
+     <div class="col1 pull7">10</div>
+     <div class="col1 pull9">11</div>
+     <div class="col1 pull11">12</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col1 push11&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col1 push9&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col1 push7&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col1 push5&quot;&gt;4&lt;/div&gt;
+     &lt;div class=&quot;col1 push3&quot;&gt;5&lt;/div&gt;
+     &lt;div class=&quot;col1 push1&quot;&gt;6&lt;/div&gt;
+     &lt;div class=&quot;col1 pull1&quot;&gt;7&lt;/div&gt;
+     &lt;div class=&quot;col1 pull3&quot;&gt;8&lt;/div&gt;
+     &lt;div class=&quot;col1 pull5&quot;&gt;9&lt;/div&gt;
+     &lt;div class=&quot;col1 pull7&quot;&gt;10&lt;/div&gt;
+     &lt;div class=&quot;col1 pull9&quot;&gt;11&lt;/div&gt;
+     &lt;div class=&quot;col1 pull11&quot;&gt;12&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h5>Ejemplo 3</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>4 columnas de 3 unidades (orden normal)</li>
+<li>Large: 4 columnas de 3 unidades (orden inverso)</li>
+<li>Medium: 4 columnas de 3 unidades (orden impares primero)</li>
+<li>Small: 4 columnas de 3 unidades (orden pares primero)</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col3 push9-large push6-small">1</div>
+     <div class="col3 push3-large push3-medium pull3-small">2</div>
+     <div class="col3 pull3-large pull3-medium push3-small">3</div>
+     <div class="col3 pull9-large pull6-small">4</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col3 push9-large push6-small&quot;&gt;1&lt;/div&gt;
+     &lt;div class=&quot;col3 push3-large push3-medium pull3-small&quot;&gt;2&lt;/div&gt;
+     &lt;div class=&quot;col3 pull3-large pull3-medium push3-small&quot;&gt;3&lt;/div&gt;
+     &lt;div class=&quot;col3 pull9-large pull6-small&quot;&gt;4&lt;/div&gt;
+ &lt;/div&gt;</code></pre>
+<h4>Centered</h4>
+<p> La grilla ofrece la posibilidad de posicionar una columna de manera centrada a trav&eacute;s de la clase <code>centered</code>. 
+ A su vez también se encuentran disponibles clases para el manejo ante diferentes resoluciones. 
+ Las clases disponibles son: <code>centered-small</code>, <code>centered-medium</code> y <code>centered-large</code>:
+</p>
+<h5>Ejemplo 1</h5>
+<p> Comportamiento esperado:
+
+</p>
+<ul>
+<li>1 columna de 4 unidades sin centrar</li>
+<li>Large: 1 columna de 4 unidades centrada</li>
+<li>Medium: 1 columnas de 4 unidades sin centrar</li>
+<li>Small: 1 columnas de 4 unidades centrada</li>
+</ul>
+<div class="preview"> <div class="row-col">
+     <div class="col4 centered-large centered-small">1</div>
+ </div></div><pre><code> &lt;div class=&quot;row-col&quot;&gt;
+     &lt;div class=&quot;col4 centered-large centered-small&quot;&gt;1&lt;/div&gt;
  &lt;/div&gt;</code></pre>
 <h3>Sass</h3>
 <h4>Import</h4>
@@ -2645,9 +3540,15 @@ resuelve todos los anchos de manera autom&aacute;tica. Valor predeterminado: 12.
 <li><code>$grid-default-row-class</code>: Nombre de la clase para el contenedor (<code>row-col</code>). Valor predeterminado: <code>row-col</code>.</li>
 <li><code>$grid-default-column-class</code>: Nombre de la clase para las columnas (<code>colX</code>). Valor predeterminado: <code>col</code>.</li>
 <li><code>$grid-default-offset-class</code>: Nombre de la clase para aplicar offset (<code>offsetX</code>). Valor predeterminado: <code>offset</code>.</li>
+<li><code>$grid-default-centered-class</code>: Nombre de la clase para aplicar el centrado de columnas (<code>centered</code>). Valor predeterminado: <code>centered</code>.</li>
+<li><code>$grid-default-pull-class</code>: Nombre de la clase para aplicar pull (<code>pullX</code>). Valor predeterminado: <code>pull</code>.</li>
+<li><code>$grid-default-push-class</code>: Nombre de la clase para aplicar push (<code>pushX</code>). Valor predeterminado: <code>push</code>.</li>
+<li><code>$grid-default-first-class</code>: Nombre de la clase para aplicar el comportamiento de primeras columnas (<code>first</code>). Valor predeterminado: <code>first</code>.</li>
 <li><code>$grid-default-container-class</code>: Nombre de la clase para el contenedor principal (<code>container</code>). Valor predeterminado: <code>container</code>.</li>
 <li><code>$grid-default-include-offset</code>: Incluir estilos para aplicar offset. Valor predeterminado: <code>true</code>.</li>
 <li><code>$grid-default-include-container</code>: Incluir estilos para el contenedor. Valor predeterminado: <code>true</code>.</li>
+<li><code>$grid-default-include-push</code>: Incluir estilos para aplicar push. Valor predeterminado: <code>true</code>.</li>
+<li><code>$grid-default-include-pull</code>: Incluir estilos para aplicar pull. Valor predeterminado: <code>true</code>.</li>
 </ul>
 </div><div class="code"><pre><code>@import "compass/css3/box-sizing";
 @import "clearfix";
@@ -2657,8 +3558,14 @@ $grid-default-row-class: "row-col" !default;
 $grid-default-column-class: "col" !default;
 $grid-default-offset-class: "offset" !default;
 $grid-default-container-class: "container" !default;
+$grid-default-centered-class: "centered" !default;
+$grid-default-first-class: "first" !default;
+$grid-default-pull-class: "pull" !default;
+$grid-default-push-class: "push" !default;
 $grid-default-include-container: true !default;
 $grid-default-include-offset: true !default;
+$grid-default-include-pull: true !default;
+$grid-default-include-push: true !default;
 
 @mixin grid(){
 	
@@ -2666,21 +3573,29 @@ $grid-default-include-offset: true !default;
 		@include grid-container();
 	}
 
-	@include grid-columns();
+	.#{$grid-default-row-class} {
+		width: 100%;
+		@include clearfix;
 
-}
+		@include grid-columns("");
 
-@mixin grid-container(){
+		@media (max-width: 480px){
+			@include grid-columns("-small");
+		}
+
+		@media (min-width: 481px) and (max-width: 800px){
+			@include grid-columns("-medium");
+		}
+
+		@media (min-width: 801px) and (max-width: 1024px){
+			@include grid-columns("-large");
+		}
 
-	.#{$grid-default-container-class} {
-		width: 90%;
-		max-width: 1200px;
-		min-width: 950px;
 	}
 
 }
 
-@mixin grid-columns(){
+@mixin grid-columns($grid-size){
 
 	$grid-gutters: $grid-default-columns - 1;
 	$grid-space-width: 100% / $grid-default-columns;
@@ -2689,57 +3604,106 @@ $grid-default-include-offset: true !default;
 	$grid-column-unit-width: ($grid-space-unit-width * 3) + $grid-corrector;
 	$grid-gutter-unit-width: $grid-space-unit-width + $grid-corrector;
 	$grid-magic-number-ie: 0.092;
-
-	.#{$grid-default-row-class} {
+		
+	[class^="#{$grid-default-column-class}#{$grid-size}"]{
 		width: 100%;
-		@include clearfix;
+		display: block;
+		float: left;
+		margin-left: $grid-gutter-unit-width;
+		@include box-sizing(border-box);
 
-		[class^="#{$grid-default-column-class}"]{
-			width: 100%;
-			display: block;
-			float: left;
-			margin-left: $grid-gutter-unit-width;
-			@include box-sizing(border-box);
+		&:first-child{
+			margin-left: 0;
+		}
 
-			&:first-child{
-				margin-left: 0;
-			}
+	}
+	
+	@if ($grid-default-include-pull == true) {
 
+		[class*="#{$grid-default-pull-class}"], [class*="#{$grid-default-push-class}"]{
+			position: relative;
 		}
 
-		@for $i from 1 through $grid-default-columns {
-
-			$grid-column-width: ($grid-column-unit-width * $i) + ($grid-gutter-unit-width * ($i - 1));
+	}
 
-			.#{$grid-default-column-class}#{$i} {
-				width: $grid-column-width;
+	//Estilos para cada columna
+	@for $i from 1 through $grid-default-columns {
+		
+		//Cálculo del ancho de las columnas
+		$grid-column-width: ($grid-column-unit-width * $i) + ($grid-gutter-unit-width * ($i - 1));
 
-				@if $i != $grid-default-columns {
+		.#{$grid-default-column-class}#{$i}#{$grid-size}{
+			width: $grid-column-width;
 
-					.ie7 &{
-						width: $grid-column-width - $grid-magic-number-ie;
-					}
+			@if ($i != $grid-default-columns and $grid-size == "") {
 
+				.ie7 &{
+					width: $grid-column-width - $grid-magic-number-ie;
 				}
 
 			}
 
-			@if $grid-default-include-offset == true {
+		}
+		
+		//Offset
+		@if ($grid-default-include-offset == true) {
 
-				[class^="#{$grid-default-column-class}"].#{$grid-default-offset-class}#{$i}{
-					margin-left: $grid-column-width + ($grid-space-unit-width * 2);
+			.#{$grid-default-offset-class}#{$i}#{$grid-size},
+			.#{$grid-default-offset-class}#{$i}#{$grid-size}:first-child{
+				margin-left: $grid-column-width;
+			}
 
-					&:first-child{
-						margin-left: $grid-column-width + $grid-space-unit-width;
-					}
+		}
+		
+		//Push
+		@if ($grid-default-include-push == true) {
 
-				}
+			.#{$grid-default-push-class}#{$i}#{$grid-size}, 
+			.#{$grid-default-push-class}#{$i}#{$grid-size}:first-child{
+				left: $grid-column-width + $grid-gutter-unit-width;
+			}
+
+		}
+
+		//Pull
+		@if ($grid-default-include-pull == true) {
 
+			.#{$grid-default-pull-class}#{$i}#{$grid-size}, 
+			.#{$grid-default-pull-class}#{$i}#{$grid-size}:first-child{
+				left: -($grid-column-width + $grid-gutter-unit-width);
 			}
 
 		}
 
 	}
+	
+	//Clase helper para las primeras columnas que no lo son
+	.#{$grid-default-first-class}#{$grid-size}{
+		margin-left: 0;
+	}
+
+	//Clase para ocultar columnas
+	.#{$grid-default-column-class}0#{$grid-size}{
+		display: none;
+	}
+	
+	//Clase para columnas centradas
+	.#{$grid-default-centered-class}#{$grid-size},
+	.#{$grid-default-centered-class}#{$grid-size}:first-child {
+		margin-left: auto;
+		margin-right: auto;
+		float: none;
+	}
+
+}
+
+@mixin grid-container(){
+
+	.#{$grid-default-container-class} {
+		width: 90%;
+		max-width: 1200px;
+		min-width: 950px;
+	}
 
 }</code></pre></div></article></section></section><div class="bar bottom"><div class="settings container"><button title="Desktop (1280)" data-width='1280' class="desktop ir">Desktop</button><button title="Laptop (1024)" data-width='1024' class="laptop ir">Laptop</button><button title="Tablet (768)" data-width='768' class="tablet ir">Tablet</button><button title="Smart phone (320)" data-width='320' class="smartphone ir">Smart phone</button><button title="Feature phone (240)" data-width='240' class="featurephone ir">Feature phone</button><button title="Auto (100%)" data-width="100%" class="auto is-active">Auto</button></div></div><!--[if !IE]><!-->
 <script src="docs.js"></script><!--<![endif]-->