]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
changes grid variable names and adds button variables
authorRafiBomb <rafi@zurb.com>
Tue, 8 Mar 2016 17:53:36 +0000 (09:53 -0800)
committerRafiBomb <rafi@zurb.com>
Tue, 8 Mar 2016 17:53:36 +0000 (09:53 -0800)
package.json
scss/_global.scss
scss/components/_button.scss
scss/grid/_grid.scss
testing/src/assets/scss/_settings.scss
testing/src/assets/scss/app.scss
testing/src/pages/kitcat.html

index bab4c09eaf598e7010d0ebe07e7051995049fc38..17e3059a7162d5bea0ae90fe370983a013075533 100644 (file)
@@ -35,7 +35,7 @@
     "gulp-webserver": "^0.9.1",
     "handlebars": "^3.0.3",
     "highlight.js": "^8.7.0",
-    "inky": "^1.2.1",
+    "inky": "^1.2.2",
     "lazypipe": "^1.0.1",
     "marked": "^0.3.5",
     "media-query-extractor": "^0.1.1",
index f7ba60b8d39a85966bf2d8dae89a748e450971a1..d6fc968b41f7a5c0672bae92c9824a8993f707bc 100755 (executable)
@@ -12,7 +12,7 @@ $primary-color: #2199e8 !default;
 
 /// Secondary color, used with components that support the `.secondary` class.
 /// @type Color
-$secondary-color: #777 !default;
+$secondary-color: #777777 !default;
 
 /// Color to indicate a positive status or action, used with the `.success` class.
 /// @type Color
@@ -80,7 +80,7 @@ $global-padding: 16px !default;
 
 /// Global margin. Margin requires a capital 'M' to workin Outlook.com
 /// @type Number
-$global-margin: 32px !default;
+$global-margin: 16px !default;
 
 /// Global raidus of radius-corners.
 /// @type Number
index d903b9198620401d30bdc189e8a6793175f8d436..b4e9e764feb324126fc3c4c46406031b62948fd7 100755 (executable)
@@ -74,7 +74,7 @@ table.button {
   width: auto !important;
 
   table {
-    margin-bottom: $button-margin;
+    Margin-bottom: $button-margin;
 
     td {
       width: auto !important;
index 6112a07d5b88c9a655f8bd9fb732f52bafcd2bfd..37ec36e9103d9e8f86717353a9d33fe2509c5510 100755 (executable)
@@ -32,8 +32,7 @@ table {
   }
 
   &.container {
-    background: $container-background-color;
-
+    background: $container-background;
     width: $global-width;
     margin: 0 auto;
     text-align: inherit;
index e99bda581cb904a0d733cf8e5c4e0b184075c1c1..64565a85fc87c99cfc2a5e13fb605d009f3165ab 100644 (file)
@@ -17,7 +17,7 @@
 // ---------
 
 $primary-color: #2199e8;
-$secondary-color: #777;
+$secondary-color: #777777;
 $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
@@ -30,7 +30,7 @@ $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;
 $body-background: $light-gray;
-$container-background-color: $white;
+$container-background: $white;
 $global-font-color: $black;
 $body-font-family: Helvetica, Arial, sans-serif;
 $global-padding: 16px;
index ae721c36842cb94aa64872dc466e8b3f9a8b08bc..fe9a867218c26a67293acc50c3f19e76d4e58a33 100644 (file)
       display: block !important;
     }
   }
-}
\ No newline at end of file
+}
+
+.header {
+  background: $light-gray;
+  border-radius: 10px;
+  Margin-bottom: $global-margin * 2;
+
+  .columns {
+    padding-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  img {
+    padding-top: $global-padding;
+    padding-bottom: $global-padding;
+  }
+}
+
+.container {
+  border-radius: 10px;
+}
+
+.feature-block {
+  background: $light-gray;
+  Margin-bottom: $global-padding * 2;
+
+  .columns {
+    padding-top: $global-padding * 2;
+    padding-bottom: $global-padding * 2;
+  }
+}
+
+.gallery {
+  img {
+    Margin-bottom: $global-margin;
+  }
+
+  .gallery-name {
+    text-align: center;
+    font-weight: bold;
+    Margin-bottom: 0;
+  }
+
+  .gallery-age {
+    color: $secondary-color;
+    text-align: center;
+  }
+}
index bbacf0c98ce8ca2dcd79f3378bb64dcd6cd0f045..fbc9db9c09393ffb8359969bc54bb06d1185074c 100644 (file)
@@ -1,26 +1,27 @@
 <container>
+  <div class="header">
+    <row>
+      <columns small="12" large="12">
+        <center>
+          <img class="float-center" src="http://placehold.it/150x50" alt="">
+        </center>
+      </columns>
+    </row>
 
-  <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="6" large="6">
+        <p>Monthly Pawprint</p>
+      </columns>
+      <columns small="6" large="6">
+        <p class="text-right">April 1, 2016</p>
+      </columns>
+    </row>
+  </div>
 
   <row>
     <columns small="12" large="12">
       <center>
-        <img align="center" class="float-center" src="http://placehold.it/450x250" alt="">
+        <img class="float-center" src="http://placehold.it/450x250" alt="">
       </center>
     </columns>
   </row>
       <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>
+        <button class="primary tiny" 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>
+  <div class="feature-block">
+    <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>
+  </div>
 
-  <row>
+  <row class="gallery">
     <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>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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="image of a cute kitty">
-          <p class="text-center">name</p>
-          <p class="text-center">age</p>
+          <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>