test/css/grid/gutter.css in ezy-0.0.7 vs test/css/grid/gutter.css in ezy-0.0.8
- old
+ new
@@ -7,164 +7,235 @@
* Static grid
* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- *
* Default gutter property
*/
-.gutter-default-2 {
- /* Spanning 2 columns */
- width: 150px;
+.gutter-default-a-1 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
-.gutter-default-3 {
- /* Spanning 3 columns */
- width: 240px;
+.gutter-default-b-1 {
+ /* Spanning 2 columns */
+ width: 150px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
/* -------------------------------------------------------------------- *
* Forcing gutter property: padding
*/
-.gutter-padding-2 {
+.gutter-padding-a-2 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.gutter-padding-b-2 {
/* Spanning 2 columns */
width: 150px;
- margin-left: 15px;
- margin-right: 15px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
}
-.gutter-padding-3 {
- /* Spanning 3 columns */
- width: 240px;
- margin-left: 15px;
- margin-right: 15px;
+/* -------------------------------------------------------------------- *
+ * Setting default gutter property to padding
+ */
+.gutter-default-a-3 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
}
+.gutter-default-b-3 {
+ /* Spanning 2 columns */
+ width: 150px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
/* -------------------------------------------------------------------- *
* Forcing gutter property: margin
*/
-.gutter-margin-2 {
- /* Spanning 2 columns */
- width: 150px;
+.gutter-margin-a-4 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
-.gutter-margin-3 {
- /* Spanning 3 columns */
- width: 240px;
+.gutter-margin-b-4 {
+ /* Spanning 2 columns */
+ width: 150px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
/* -------------------------------------------------------------------- *
* Trying again, using grid-init()
* -------------------------------------------------------------------- */
-.gutter-default-2, .gutter-default-3 {
+.gutter-default-a-5, .gutter-default-b-5 {
float: left;
margin-left: 15px;
margin-right: 15px;
}
/* -------------------------------------------------------------------- *
* Default gutter property after grid-init()
*/
-.gutter-default-2 {
+.gutter-default-a-5 {
+ /* Spanning 1 columns */
+ width: 60px;
+}
+
+.gutter-default-b-5 {
/* Spanning 2 columns */
width: 150px;
}
-.gutter-default-3 {
- /* Spanning 3 columns */
- width: 240px;
-}
-
/* -------------------------------------------------------------------- *
* Forcing gutter property: padding after grid-init()
*/
-.gutter-padding-2 {
+.gutter-padding-a-6 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+.gutter-padding-b-6 {
/* Spanning 2 columns */
width: 150px;
- margin-left: 15px;
- margin-right: 15px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
}
-.gutter-padding-3 {
- /* Spanning 3 columns */
- width: 240px;
- margin-left: 15px;
- margin-right: 15px;
+/* -------------------------------------------------------------------- *
+ * Setting default gutter property to padding after grid-init()
+ */
+.gutter-default-a-7 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
}
+.gutter-default-b-7 {
+ /* Spanning 2 columns */
+ width: 150px;
+ float: left;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
/* -------------------------------------------------------------------- *
* Forcing gutter property: margin after grid-init()
*/
-.gutter-margin-2 {
- /* Spanning 2 columns */
- width: 150px;
+.gutter-margin-a-8 {
+ /* Spanning 1 columns */
+ width: 60px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
-.gutter-margin-3 {
- /* Spanning 3 columns */
- width: 240px;
+.gutter-margin-b-8 {
+ /* Spanning 2 columns */
+ width: 150px;
+ float: left;
margin-left: 15px;
margin-right: 15px;
}
/* -------------------------------------------------------------------- *
* Again, now with a fluid grid
* -------------------------------------------------------------------- */
-.gutter-default-2, .gutter-default-3 {
+.gutter-default-a-9, .gutter-default-b-9 {
float: left;
margin-left: 2.77%;
margin-right: 2.77%;
}
/* -------------------------------------------------------------------- *
* Default gutter property after grid-init()
*/
-.gutter-default-2 {
- /* Spanning 2 of 6 columns */
- width: 27.77%;
-}
-
-.gutter-default-3 {
+.gutter-default-a-9 {
/* Spanning 3 of 6 columns */
width: 44.44%;
}
+.gutter-default-b-9 {
+ /* Spanning 6 of 6 columns */
+ width: 94.44%;
+}
+
/* -------------------------------------------------------------------- *
* Forcing gutter property: padding after grid-init()
*/
-.gutter-padding-2 {
- /* Spanning 2 of 6 columns */
- width: 27.77%;
+.gutter-padding-a-10 {
+ /* Spanning 3 of 6 columns */
+ width: 44.44%;
+ float: left;
padding-left: 2.77%;
padding-right: 2.77%;
}
-.gutter-padding-3 {
+.gutter-padding-b-10 {
+ /* Spanning 6 of 6 columns */
+ width: 94.44%;
+ float: left;
+ padding-left: 2.77%;
+ padding-right: 2.77%;
+}
+
+/* -------------------------------------------------------------------- *
+ * Setting default gutter property to padding after grid-init()
+ */
+.gutter-default-a-11 {
/* Spanning 3 of 6 columns */
width: 44.44%;
+ float: left;
padding-left: 2.77%;
padding-right: 2.77%;
}
+.gutter-default-b-11 {
+ /* Spanning 6 of 6 columns */
+ width: 94.44%;
+ float: left;
+ padding-left: 2.77%;
+ padding-right: 2.77%;
+}
+
/* -------------------------------------------------------------------- *
* Forcing gutter property: margin after grid-init()
*/
-.gutter-margin-2 {
- /* Spanning 2 of 6 columns */
- width: 27.77%;
+.gutter-margin-a-12 {
+ /* Spanning 3 of 6 columns */
+ width: 44.44%;
+ float: left;
margin-left: 2.77%;
margin-right: 2.77%;
}
-.gutter-margin-3 {
- /* Spanning 3 of 6 columns */
- width: 44.44%;
+.gutter-margin-b-12 {
+ /* Spanning 6 of 6 columns */
+ width: 94.44%;
+ float: left;
margin-left: 2.77%;
margin-right: 2.77%;
}