Rework responsive class generation slightly and add responsive grid frame and cell...

diff --git a/scss/zf-grid/_classes.scss b/scss/zf-grid/_classes.scss
index 192f53df929adbb5cfd61292fb28d0c347b0206f..58ec3c7ff80e07333cc87bdc8088ddf3a01006e3 100644 (file)
--- a/scss/zf-grid/_classes.scss
+++ b/scss/zf-grid/_classes.scss
@@ -53,6 +53,14 @@
       .grid > .#{$-zf-size}-shrink {
         @include zf-cell-base(shrink);
       }
+
+      &.#{$-zf-size}-grid-frame {
+        width: auto;
+        @include zf-grid-frame(true);
+      }
+      .#{$-zf-size}-cell-block {
+        @include zf-cell-block();
+      }
     }
 
     @for $i from 1 through $grid-columns {
@@ -64,6 +72,25 @@
   }
 }
 
+@mixin -zf-breakpoint-cell-classes($breakpoint, $vertical) {
+  > .#{$breakpoint}-auto {
+    @include zf-cell-static(auto, false, $breakpoint: $breakpoint, $vertical: $vertical);
+  }
+
+  > .#{$breakpoint}-shrink {
+    @include zf-cell-static(shrink, false, $breakpoint: $breakpoint, $vertical: $vertical);
+  }
+
+  @for $i from 1 through $grid-columns {
+    // Sizing (percentage)
+    $classname: if($vertical, '.#{$breakpoint}-vertical-#{$i}', '.#{$breakpoint}-#{$i}');
+
+    > #{$classname} {
+      @include zf-cell-static($i, false, $breakpoint: $breakpoint, $vertical: $vertical);
+    }
+  }
+}
+
 // Margin Grid classes
 @mixin zf-margin-grid-classes(
   $gutter-position: left right,
@@ -88,42 +115,12 @@
     }
 
     @include -zf-each-breakpoint() {
-      > .#{$-zf-size}-auto {
-        @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: $vertical);
-      }
-
-      > .#{$-zf-size}-shrink {
-        @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: $vertical);
-      }
-
-      @for $i from 1 through $grid-columns {
-        // Sizing (percentage)
-        $classname: if($vertical, '.#{$-zf-size}-vertical-#{$i}', '.#{$-zf-size}-#{$i}');
-
-        > #{$classname} {
-          @include zf-cell-static($i, false, $breakpoint: $-zf-size, $vertical: $vertical);
-        }
-      }
+      @include -zf-breakpoint-cell-classes($-zf-size, $vertical);
 
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
           @if(map-has-key($grid-margin-gutters, $bp)) {
-            > .#{$bp}-auto {
-              @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: $vertical);
-            }
-
-            > .#{$bp}-shrink {
-              @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: $vertical);
-            }
-
-            @for $i from 1 through $grid-columns {
-              // Sizing (percentage)
-              $classname: if($vertical, '.#{$bp}-vertical-#{$i}', '.#{$bp}-#{$i}');
-
-              > #{$classname} {
-                @include zf-cell-static($i, false, $breakpoint: $-zf-size, $vertical: $vertical);
-              }
-            }
+            @include -zf-breakpoint-cell-classes($bp, $vertical);
           }
         }
       }
@@ -188,6 +185,14 @@
     @include zf-cell-block(true);
   }
 
+  @include -zf-each-breakpoint() {
+    @if not($-zf-size == small) {
+      .#{$-zf-size}-cell-block-vertical {
+        @include zf-cell-block(true);
+      }
+    }
+  }
+
   .grid-vertical {
     @include zf-grid(vertical);
 
@@ -196,24 +201,34 @@
       @include zf-grid-frame(true);
     }
 
+
     > .cell {
       @include zf-cell-reset();
+    }
 
+    > .auto {
+      @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
     }
 
-    @include -zf-each-breakpoint() {
-      > .cell {
-        @include zf-cell-static($breakpoint: $-zf-size, $vertical: true, $gutter-output: false, $gutter-type: padding);
-      }
+    > .shrink {
+      @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
     }
 
+
     @include -zf-each-breakpoint() {
-      > .auto {
-        @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
-      }
+      @if not($-zf-size == small) {
+        > .#{$-zf-size}-auto {
+          @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+        }
 
-      > .shrink {
-        @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+        > .#{$-zf-size}-shrink {
+          @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+
+        &.#{$-zf-size}-grid-frame {
+          width: auto;
+          @include zf-grid-frame(true);
+        }
       }
 
       @for $i from 1 through $grid-columns {

diff --git a/test/visual/zf-grid/frame-grid.html b/test/visual/zf-grid/frame-grid.html
index 359cb94a41738e53969b5edb7ec4a8765d8f9a1b..a7218d461f0c8ad7dfe4458ba4b5a66e9b89638b 100644 (file)
--- a/test/visual/zf-grid/frame-grid.html
+++ b/test/visual/zf-grid/frame-grid.html
@@ -20,19 +20,19 @@
     </style>
   </head>
   <body>
-    <div class="grid grid-vertical grid-frame">
-      <div class="cell small-shrink header">
+    <div class="grid grid-vertical medium-grid-frame">
+      <div class="cell shrink header">
         <h1>Grid Frame Header</h1>
       </div>
-      <div class="cell small-auto grid padding-gutters">
-        <div class="cell small-4 cell-block-vertical">
+      <div class="cell auto grid margin-gutters">
+        <div class="cell medium-4 medium-cell-block-vertical">
           <h2>Independent scrolling sidebar</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.</p>
 
           <p>Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.</p>
 
         </div>
-        <div class="cell small-8 cell-block-vertical">
+        <div class="cell medium-8 medium-cell-block-vertical">
           <h2>Independent scrolling body</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.</p>
 
@@ -47,7 +47,7 @@
 
         </div>
       </div>
-      <div class="cell small-shrink footer">
+      <div class="cell shrink footer">
         <h3>Here's my footer</h3>
       </div>