From: Jordan Humphreys <jordan@mailyard.net>
Date: Tue, 29 Aug 2017 17:02:50 +0000 (-0700)
Subject: Start moving to ssl.
X-Git-Tag: v2.3.0~7^2~26
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=7a0a991807f6981c71ec796055dd5231af7bc749;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Start moving to ssl.
---

diff --git a/docs/pages/alignment.md b/docs/pages/alignment.md
index a344c3a5..419ae8a7 100644
--- a/docs/pages/alignment.md
+++ b/docs/pages/alignment.md
@@ -75,7 +75,7 @@ Just wrap the `<center>` around an image you’ll be good to go. Inky will handl
   <row>
     <columns>
       <center>
-        <img src="http://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
+        <img src="https://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
       </center>
     </columns>
   </row>
@@ -98,12 +98,12 @@ If you need to center an image only on mobile clients, you can apply the `.small
 <container>
   <row>
     <columns small="12" large="3" class="large-offset-1">
-      <img class="small-float-center" src="http://placehold.it/200?text=small-center" alt="please don't forget me">
+      <img class="small-float-center" src="https://placehold.it/200?text=small-center" alt="please don't forget me">
     </columns>
     <columns small="12" large="8">
       <h4 class="small-text-center">What is the deal?</h4>
       <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
-    </columns>  
+    </columns>
   </row>
 </container>
 ```
@@ -118,9 +118,9 @@ You can also align images to the left or the right.
 <container>
   <row>
     <columns>
-      <img class="float-left" src="http://placehold.it/200?text=left" alt="">
-      <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="https://placehold.it/200?text=left" alt="">
+      <img class="float-center" src="https://placehold.it/200?text=center" alt="">
+      <img class="float-right" src="https://placehold.it/200?text=right" alt="">
     </columns>
   </row>
 </container>
@@ -198,7 +198,7 @@ You can vertically align your content within columns by using `valign` attribute
 ```inky_example
 <row>
   <columns large="3" valign="top">
-    <img class="float-right" src="http://placehold.it/50" alt="">
+    <img class="float-right" src="https://placehold.it/50" alt="">
   </columns>
   <columns large="3" valign="bottom">
     <h4>Bottom</h4>
@@ -208,8 +208,8 @@ You can vertically align your content within columns by using `valign` attribute
     <p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
   </columns>
   <columns large="3" valign="middle">
-    <img class="small-float-center" src="http://placehold.it/250" alt="">
-  </columns> 
-</row> 
+    <img class="small-float-center" src="https://placehold.it/250" alt="">
+  </columns>
+</row>
 ```
 <br>
diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 57552b4b..42e9524e 100644
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -97,8 +97,8 @@ Collapsing a row removes the gutters from every column, which is the spacing bet
 
 ```inky_example
 <row class="collapse">
-  <columns large="6"><img src="http://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
-  <columns large="6"><img src="http://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
+  <columns large="6"><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
+  <columns large="6"><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
 </row>
 ```
 
@@ -112,7 +112,7 @@ Use the class `.large-offset-n` to create an offset, where `n` is the amount of
 
 ```inky_example
 <row>
-  <columns large="3" class="large-offset-3"><img src="http://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
-  <columns large="3"><img src="http://placehold.it/150x150/999999" alt=""></columns>
+  <columns large="3" class="large-offset-3"><img src="https://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
+  <columns large="3"><img src="https://placehold.it/150x150/999999" alt=""></columns>
 </row>
 ```
diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index d057bc4f..4f6772a4 100644
--- a/docs/pages/thumbnail.md
+++ b/docs/pages/thumbnail.md
@@ -9,7 +9,7 @@ The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>
 The thumbnail style adds padding and a box shadow to an image. To use it, just add the class `.thumbnail` to an image element.
 
 ```inky_example
-<img src="http://placehold.it/200x200" class="thumbnail">
+<img src="https://placehold.it/200x200" class="thumbnail">
 ```
 
 <!-- <table class="thumbnail">
diff --git a/docs/pages/tips-tricks.md b/docs/pages/tips-tricks.md
index 1d4afda6..30c151e2 100644
--- a/docs/pages/tips-tricks.md
+++ b/docs/pages/tips-tricks.md
@@ -9,14 +9,14 @@ Coding responsive emails can be a real pain. This guide will help you through so
 
 Most responsive emails are built on templates. They’re simple, easy to drop content into and are usually well-tested. Templates have a serious cost though. "Oh, so you want to do anything other than change the colors and text?" Sorry … you’re out of luck, Chuck. Templates tend to be hard to customize heavily or to extend. For that you need a framework.
 
-A framework is a collection of reusable code and design patterns which gives users a solid, tested base upon which to build. Not a bunch of visual styles you can just bolt on as an afterthought and call it a day. 
+A framework is a collection of reusable code and design patterns which gives users a solid, tested base upon which to build. Not a bunch of visual styles you can just bolt on as an afterthought and call it a day.
 
 - Frameworks give you the solid base of a template, but the extensibility of custom code. You can make your template fit your content, not the other way around.
 - Additionally, a framework gives you a common codebase to structure your projects around. So if new team members work on the project, they don't have to re-invent the wheel. You can spend less time coding your email and more time optimizing your campaigns.
 
 ## Need to know
 
-The sad truth about creating or coding HTML emails is that tables are the only things that are universally supported when it comes to email design. If you came from the world of building websites, this may seem like a stepping into Doc Brown's Delorean, charging up the Flux-capitor, and going back to the 1996. Suddenly your CSS is written with inline style tags, useful CSS properties don't work and you're burried in a sea of table tags. 
+The sad truth about creating or coding HTML emails is that tables are the only things that are universally supported when it comes to email design. If you came from the world of building websites, this may seem like a stepping into Doc Brown's Delorean, charging up the Flux-capitor, and going back to the 1996. Suddenly your CSS is written with inline style tags, useful CSS properties don't work and you're burried in a sea of table tags.
 
 <div class="callout secondary tip">General rule of thumb: your email is not going to look identical in every client. And that’s OK.</div>
 
@@ -90,7 +90,7 @@ Where we would have divs in website land…
       </th>
     </tr>
   </tbody>
-</table>      
+</table>
 ```
 
 Table elements have their own special “display” values. Sometimes we can override them to display as block elements, but more on that later. The display value (in combination with the HTML schema specified in the DOCTYPE), specifies the rules for rendering each element.
@@ -137,15 +137,15 @@ If you are using the CSS version, you can use our [web inliner](http://foundatio
 
 ---
 
-#### Margin and Padding: 
+#### Margin and Padding:
 
 - Outlook 2007, 2010, and 2013 does not support "padding" in `<p>`, `<div>` or `<a>` tags. Use margin instead.
-- Forget about using CSS positioning like `top`, `bottom`, `relative`, `absolute`. 
+- Forget about using CSS positioning like `top`, `bottom`, `relative`, `absolute`.
 - Margin is universally supported BUT you may see some inconsistencies in Outlook 2007, 2010, and 2013. Padding is safer. Also, it is known that Outlook.com does not support the margin property. The odd thing is Outlook.com does support margin with a capital "M".
-Use it like this: 
-  
+Use it like this:
+
 ```scss
-margin: 10px; 
+margin: 10px;
 Margin: 10px;  // fallback for Outlook.com
 ```
 
@@ -195,7 +195,7 @@ To style ALT text, place your font styles inline on the image.
 
 #### Retina Images
 
-OK, so I got my readers to allow images…now what about Retina? 
+OK, so I got my readers to allow images…now what about Retina?
 
 Fun fact: Your email client is better at resizing images than Photoshop is.
 
@@ -219,7 +219,7 @@ Video's in emails are not supported except in Apple Mail and Outlook 2011. [See
 
 #### Quick Tips on Images
 
-Remember to use full paths to images, not relative paths. (e.g. http://www.yourserver.com/email/images/logo.gif). 
+Remember to use full paths to images, not relative paths. (e.g. http://www.yourserver.com/email/images/logo.gif).
 
 Also, link to images from your own server, not anyone elses. If you don't control it you never know when that url will change.
 
@@ -249,7 +249,7 @@ Causes
 - Making the HTML file size less than 20kb (20540 characters) - not including images or the plain-text version. This charachter count includes things like inline styles, HTML tags, and spaces, and other HTML entities.
 - Downloading the message over cellular data, not WiFi. Can't do much about this one.
 
-Solution? 
+Solution?
 
 - Create emails that are short and to the point. Too many call-to-actions's, topics, or long emails don't tend to work that well anyways.
 - Minify your HTML. The ZURB Stack comes with a setting to minify the HTML if you run `npm run build`. This will remove white-space which adds to the charachter count and file size. Our [web inliner](http://foundation.zurb.com/emails/inliner.html) also has an option to remove (compress) whitespace between your charachters.
@@ -268,7 +268,7 @@ Apple suggests 17px for mobile devices and Google recommends up to 21px for body
 
 #### Typography
 
-<img src="http://group-mail.com/wp-content/uploads/Screen-shot-2011-08-12-at-2.58.47-PM.png" alt="">
+<img src="https://group-mail.com/wp-content/uploads/Screen-shot-2011-08-12-at-2.58.47-PM.png" alt="">
 
 Use fonts that are recognizeable to most users.
 
@@ -286,12 +286,12 @@ Do progressively enhance. ZURB and Foundation for Emails builds Outlook-first. M
 Let's imagine the vast majority of your audience uses Apple Mail. You'd be able to get away with using CSS keyframe animation and SVG masks.
 
 If you're not sure where to start, you can see the [Email Client Market Share](http://emailclientmarketshare.com/) by Litmus
- 
+
 #### Button Size and Touch Targets
 
-Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. 
+Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.
 
-Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. 
+Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px.
 
 Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.
 
@@ -303,7 +303,7 @@ While these guidelines give a general measurement for touch targets, they’re n
 
 Testing costs money. Not testing costs you customers.
 
-So test, test, and test again. After you have an inlined version of your email, you should test it on as many devices and email clients as you can. 
+So test, test, and test again. After you have an inlined version of your email, you should test it on as many devices and email clients as you can.
 
 The two top testing services out there are:
 [Litmus](https://litmus.com/)
@@ -313,7 +313,7 @@ If you're not sure where to start, you can see the [Email Client Market Share](h
 
 Foundation for Emails is tested on the most popular clients. You can also test on the clients listed in our [compatability guide](compatibility.html)
 
-These services make testing on lots of email clients and devices much faster. Try to hit the main categories: a Windows machine, a Mac, an iPhone, an Android, a tablet. Still, nothing beats testing on a real device. 
+These services make testing on lots of email clients and devices much faster. Try to hit the main categories: a Windows machine, a Mac, an iPhone, an Android, a tablet. Still, nothing beats testing on a real device.
 
 ---
 
diff --git a/docs/pages/wrapper.md b/docs/pages/wrapper.md
index 02e9f144..78dab9ac 100644
--- a/docs/pages/wrapper.md
+++ b/docs/pages/wrapper.md
@@ -54,7 +54,7 @@ Creating a fluid header with the `<wrapper>` component is pretty straight forwar
   <container>
     <row class="collapse">
       <columns small="6" valign="middle">
-        <img src="http://placehold.it/200x50/663399">
+        <img src="https://placehold.it/200x50/663399">
       </columns>
       <columns small="6" valign="middle">
         <p class="text-right">BASIC</p>