updates body background variable

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 02d61c78aa003b03f08e1bdae565dd9710523d37..ca539ca1891fd11bb2d44e7b59f3d35cd4fe61e8 100755 (executable)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -16,7 +16,7 @@ $wrapper-padding-top: 10px !default;
 
 /// Default padding for the bottom of a column.
 /// @type Number
-$column-padding-bottom: 10px !default;
+$column-padding-bottom: 16px !default;
 
 /// Default gutter for the grid system
 /// @type Number
@@ -68,6 +68,7 @@ th.columns,
 th.column {
   margin: 0 auto;
   padding-left: $grid-column-gutter;
+  padding-bottom: $column-padding-bottom;
 }
 
 td.columns.last,

diff --git a/testing/src/assets/scss/_callout-block.scss b/testing/src/assets/scss/_callout-block.scss
new file mode 100644 (file)
index 0000000..5bdac88
--- /dev/null
+++ b/testing/src/assets/scss/_callout-block.scss
@@ -0,0 +1,8 @@
+
+@media only screen and (max-width: #{$small-range}) {
+  .float-right {
+    margin: 0 auto;
+    float: none;
+    text-align: center;
+  }
+}
\ No newline at end of file

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 5076628c9c6747c4912cfb24153c6886fd6f9012..3461e5aedef2b847638eaa9c3c2b86d11a3bb2ad 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -39,7 +39,7 @@ $global-rounded: 500px;
 
 $grid-column-count: 12;
 $wrapper-padding-top: 10px;
-$column-padding-bottom: 10px;
+$column-padding-bottom: 16px;
 $grid-column-gutter: 16px;
 $sub-column-padding-right: $grid-column-gutter / 2;
 $body-background-color: $light-gray;

diff --git a/testing/src/pages/kitcat.html b/testing/src/pages/kitcat.html
new file mode 100644 (file)
index 0000000..0cf0a9b
--- /dev/null
+++ b/testing/src/pages/kitcat.html
@@ -0,0 +1,180 @@
+<container>
+
+  <row>
+    <columns small="12" large="12">
+      <center>
+        <img align="center" class="float-center" src="http://placehold.it/150x50" alt="">
+      </center>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="6" large="6">
+      <p>Monthly Pawprint</p>
+    </columns>
+    <columns small="6" large="6">
+      <p class="text-right">April 1, 2016</p>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <center>
+        <img align="center" class="float-center" src="http://placehold.it/450x250" alt="">
+      </center>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <h4 class="text-center">reader's choice award</h4>
+      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur.</p>
+      <center>
+        <button class="primary small" href="http://zurb.com">Find out more</button>
+      </center>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="3" class="large-offset-1">
+      <img class="small-float-center" src="http://placehold.it/120" alt="question mark image">
+    </columns>
+    <columns small="12" large="8">
+      <h4>what type are you?</h4>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris.</p>
+      <button class="primary small" href="http://zurb.com">Check it out</button>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <h4 class="text-center">furry friends</h4>
+      <block-grid up="3">
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+        <td>
+          <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
+          <p class="text-center">name</p>
+          <p class="text-center">age</p>
+        </td>
+      </block-grid>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12">
+      <center>
+        <button class="primary small" href="http://zurb.com">Read all tips</button>
+      </center>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="8" class="large-offset-4">
+      <h4>grooming 101</h4>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="3" class="large-offset-1">
+      <img src="http://placehold.it/120" alt="">
+    </columns>
+    <columns small="12" large="8">
+      <h6>Learning to Brush like a Pro</h6>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a href="http://zurb.com">Learn to Brush</a>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="3" class="large-offset-1">
+      <img src="http://placehold.it/120" alt="">
+    </columns>
+    <columns small="12" large="8">
+      <h6>Learning to Brush like a Pro</h6>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a href="http://zurb.com">Learn to Brush</a>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="3" class="large-offset-1">
+      <img src="http://placehold.it/120" alt="">
+    </columns>
+    <columns small="12" large="8">
+      <h6>Learning to Brush like a Pro</h6>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <a href="http://zurb.com">Learn to Brush</a>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="8" class="large-offset-2">
+      <img src="http://placehold.it/580x30" alt="">
+    </columns>
+    <columns small="12" large="2">
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="12" class="large-offset-3">
+      <menu class="small-vertical text-center">
+        <item href="one.html">Item One</item>
+        <item href="one.html">Item Two</item>
+        <item href="one.html">Item Three</item>
+      </menu>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" large="8" class="large-offset-2">
+      <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud <unsubscribe>Unsubscribe</unsubscribe> ullamco laboris nisi ut aliquip.</p>
+    </columns>
+    <columns small="12" large="2">
+    </columns>
+  </row>
+
+</container>
\ No newline at end of file