]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
projects / thirdparty / foundation / foundation-emails.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 029c5b1)
adds visibility test
authorRafiBomb <rafi@zurb.com>
Thu, 10 Mar 2016 04:30:21 +0000 (20:30 -0800)
committerRafiBomb <rafi@zurb.com>
Thu, 10 Mar 2016 04:30:21 +0000 (20:30 -0800)
scss/components/_button.scss patch | blob | blame | history
testing/src/assets/scss/app.scss patch | blob | blame | history
testing/src/layouts/default.html patch | blob | blame | history
testing/src/pages/alignment.html [new file with mode: 0644] patch | blob
testing/src/pages/kitcat.html patch | blob | blame | history
testing/src/pages/list.html [new file with mode: 0644] patch | blob
testing/src/pages/offset-inky.html patch | blob | blame | history
testing/src/pages/th-with-center.html [deleted file] patch | blob | blame | history
testing/src/pages/visibility.html [new file with mode: 0644] patch | blob

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 708684db2a491c878398a0b014eee665c52b3f01..af6b0ec21c9216070b55f3c502e775f921c6242e 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -154,7 +154,8 @@ table.button.large {
   }
 }
 
-table.expand {
+table.expand,
+table.expanded {
   width: 100% !important;
 
   table {
diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss
index 2f225265328d99b9f67acea69210572215431afa..532d047dcfafa92a0398d5e4c577d3b2b59416c6 100644 (file)
--- a/testing/src/assets/scss/app.scss
+++ b/testing/src/assets/scss/app.scss
@@ -25,6 +25,8 @@
   }
 }
 
+
+
 .header {
   background: $light-gray;
   border-radius: 10px;
@@ -75,11 +77,16 @@
   }
 }
 
+// testing styles
+
 .block-grid p {
   background: dodgerblue;
   text-align: center;
 }
 
+
+// building block
+
 .feature-list {
   
   .feature-list-item {
@@ -107,3 +114,13 @@
     }
   }
 }
+
+
+  .columns {
+    border: 1px solid red;
+
+    p {
+      background: green;
+    }
+  }
+
diff --git a/testing/src/layouts/default.html b/testing/src/layouts/default.html
index 7be6abc5ef37de8d05e7b6926468f2e00349aa44..829553d208bcd71201ebc029e86acec5fda35710 100644 (file)
--- a/testing/src/layouts/default.html
+++ b/testing/src/layouts/default.html
@@ -7,8 +7,7 @@
 </head>
  
 <body>
-<!-- inject:css -->
-  <!-- endinject -->
+  <!-- <style> -->
   <table class="body" data-made-with-foundation>
     <tr>
       <td class="center" align="center" valign="top">
diff --git a/testing/src/pages/alignment.html b/testing/src/pages/alignment.html
new file mode 100644 (file)
index 0000000..771a332
--- /dev/null
+++ b/testing/src/pages/alignment.html
@@ -0,0 +1,42 @@
+<container>
+  <row>
+    <th class="small-4 large-4 columns first">
+      <center>Centered Text</center>
+    </th>
+    <th class="small-4 large-4 columns">
+      <center>Centered Text</center>
+    </th>
+    <th class="small-4 large-4 columns last">
+      <center>Centered Text</center>
+    </th>
+  </row>
+</container>
+
+<container>
+  <row>
+    <columns small="12" large="12">
+      <p class="text-center">Centered Text</p>
+      <h4 class="text-center">Centered Text</h4>
+      <p class="text-right">Right Text</p>
+      <h4 class="text-right">Right Text</h4>
+      <p class="text-left">Left Text</p>
+      <h4 class="text-left">Left Text</h4>
+      <br>
+      <center>
+        <img src="http://placehold.it/200?text=center" alt="">
+      </center>
+      <br>
+      <img class="float-center" src="http://placehold.it/200?text=center" alt="">
+      <img class="float-right" src="http://placehold.it/200?text=right" alt="">
+      <img class="float-left" src="http://placehold.it/200?text=left" alt="">
+    </columns>
+  </row>
+</container>
+
+<container>
+  <row>
+    <columns></columns>
+    <columns>Centering a column</columns>
+    <columns></columns>
+  </row>
+</container>
diff --git a/testing/src/pages/kitcat.html b/testing/src/pages/kitcat.html
index fbc9db9c09393ffb8359969bc54bb06d1185074c..c52185ef05abf6b05af30fea17b084ad901ca92d 100644 (file)
--- a/testing/src/pages/kitcat.html
+++ b/testing/src/pages/kitcat.html
@@ -51,56 +51,79 @@
     </row>
   </div>
 
-  <row class="gallery">
+  <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="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-        <td>
-          <img align="center" class="float-center" src="http://placehold.it/120" alt="imgallery-age of a cute kitty">
-          <p class="gallery-name">gallery-name</p>
-          <p class="gallery-age">gallery-age</p>
-        </td>
-      </block-grid>
+    </columns>
+  </row>
+  
+  <row>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+    <columns small="6" large="4">
+      <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>
+    </columns>
+  </row>
+
+  <row>
+    <columns small="12" small="8" class="large-offset-4">
+      <h4>grooming 101</h4>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="4">
+      <img align="right" class="float-right" 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>
 
diff --git a/testing/src/pages/list.html b/testing/src/pages/list.html
new file mode 100644 (file)
index 0000000..66236b3
--- /dev/null
+++ b/testing/src/pages/list.html
@@ -0,0 +1,51 @@
+<container>
+
+  <row class="feature-list">
+    <columns small="12" large="12">
+
+      <h4>Feature Stories</h4>
+
+      <row class="feature-list-item">
+        <columns small="12" large="2" class="hide-for-small">
+          <img height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
+        </columns>
+        <columns small="12" large="10">
+          <h6 class="feature-list-item-header"><a href="#">I realize this is actually a serious technique, but...</a></h6>
+          <p class="feature-list-item-info">Barb E. Dahl</p>
+        </columns>
+      </row>
+
+      <row class="feature-list-item">
+        <columns small="12" large="2" class="hide-for-small">
+          <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
+        </columns>
+        <columns small="12" large="10">
+          <h6 class="feature-list-item-header"><a href="#">21 Ways to Dominate Rat Hearding</a></h6>
+          <p class="feature-list-item-info">Oren Jellow</p>
+        </columns>
+      </row>
+
+      <row class="feature-list-item">
+        <columns small="12" large="2" class="hide-for-small">
+          <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
+        </columns>
+        <columns small="12" large="10">
+          <h6 class="feature-list-item-header"><a href="#">10 Steps To Successfully Outsourcing Your Your Counciousness</a></h6>
+          <p class="feature-list-item-info">Kandi Apple</p>
+        </columns>
+      </row>
+
+      <row class="feature-list-item">
+        <columns small="12" large="2" class="hide-for-small" >
+          <img class="feature-list-image" height="40" width="40" src="http://zurb.com/stickers/images/intro-foundation.png" alt="">
+        </columns>
+        <columns small="12" large="10">
+          <h6 class="feature-list-item-header"><a href="#">How to Have a Healthier and More Productive Pancake Breakfast</a></h6>
+          <p class="feature-list-item-info">Les Moore</p>
+        </columns>
+      </row>
+      
+    </columns>
+  </row>
+
+</container>
\ No newline at end of file
diff --git a/testing/src/pages/offset-inky.html b/testing/src/pages/offset-inky.html
index 9a09012cd3c54feba9d9db85542234a9ef0b189a..689c903f8bf0841943ab750aef1a4dfb8992be7b 100644 (file)
--- a/testing/src/pages/offset-inky.html
+++ b/testing/src/pages/offset-inky.html
@@ -1,3 +1,5 @@
+
+
 <container>
   <row>
     <columns>
@@ -16,7 +18,7 @@
     <columns large="1" class="large-offset-1">
       <p>Offset 1 of 12</p>
     </columns>
-    <columns large="11">
+    <columns large="10">
       <p>10 of 12</p>
     </columns>
   </row>
@@ -29,10 +31,10 @@
     </columns>
   </row>
   <row>
-    <columns large="2" class="large-offset-2">
+    <columns small="4" large="2" class="small-offset-4 large-offset-2">
       <p>Offset 2 of 12</p>
     </columns>
-    <columns large="9">
+    <columns small="4" large="8">
       <p>9 of 12</p>
     </columns>
   </row>
diff --git a/testing/src/pages/th-with-center.html b/testing/src/pages/th-with-center.html
deleted file mode 100644 (file)
index 8911dfd..0000000
--- a/testing/src/pages/th-with-center.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<container>
-  <row>
-    <th class="small-4 large-4 columns first">
-      <center>Test Left</center>
-    </th>
-    <th class="small-4 large-4 columns">
-      <center>Test Middle</center>
-    </th>
-    <th class="small-4 large-4 columns last">
-      <center>Test Right</center>
-    </th>
-  </row>
-</container>
diff --git a/testing/src/pages/visibility.html b/testing/src/pages/visibility.html
new file mode 100644 (file)
index 0000000..48ba8e9
--- /dev/null
+++ b/testing/src/pages/visibility.html
@@ -0,0 +1,72 @@
+<row>
+  <columns small="12" large="12">
+    <h4 class="text-center">furry friends</h4>
+  </columns>
+</row>
+
+<row>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4" class="hide-for-small">
+    <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>
+  </columns>
+</row>
+
+<row>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4" class="hide-for-small">
+    <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>
+  </columns>
+</row>
+
+<row>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4">
+    <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>
+  </columns>
+  <columns small="6" large="4" class="hide-for-small">
+    <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>
+  </columns>
+</row>
+
+<row>
+  <columns small="6" large="4" class="show-for-small">
+    <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>
+  </columns>
+  <columns small="6" large="4" class="show-for-small">
+    <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>
+  </columns>
+</row>
\ No newline at end of file
Mirror of https://github.com/foundation/foundation-emails.git