From: RafiBomb <rafi@zurb.com>
Date: Mon, 7 Mar 2016 18:48:52 +0000 (-0800)
Subject: updates body background variable
X-Git-Tag: v2.0.0-rc.3~11
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=be5fb7b6dbc05400593437350413e14c6d8463f5;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

updates body background variable
---

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 02d61c78..ca539ca1 100755
--- 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
index 00000000..5bdac88e
--- /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 5076628c..3461e5ae 100644
--- 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
index 00000000..0cf0a9bf
--- /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