adds codepen image logo and adds flexbox codepen links

diff --git a/docs/assets/img/logos/cp1.svg b/docs/assets/img/logos/cp1.svg
new file mode 100644 (file)
index 0000000..5805bca
--- /dev/null
+++ b/docs/assets/img/logos/cp1.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="470.2px" height="73.7px" viewBox="0 0 470.2 73.7" style="enable-background:new 0 0 470.2 73.7;" xml:space="preserve">
+<style type="text/css">
+       .st0{fill:#FFFFFF;}
+       .st1{fill:#F1F2F2;}
+</style>
+<rect x="0.4" width="469.8" height="73.7"/>
+<g>
+       <g>
+               <path class="st0" d="M224.8,26.7c2.5,0,4.7,0.9,6.5,2.4l2.4-2.9c-2.4-2-5.5-3.2-8.9-3.2c-7.6,0-13.8,6.2-13.8,13.8
+                       s6.2,13.8,13.8,13.8c3.4,0,6.5-1.2,8.9-3.2l-2.4-2.9c-1.8,1.5-4,2.4-6.5,2.4c-5.6,0-10.1-4.5-10.1-10.1
+                       C214.7,31.3,219.2,26.7,224.8,26.7z"/>
+               <path class="st0" d="M301.4,23.8h-7.5c-1,0-1.9,0.8-1.9,1.9V48c0,1,0.8,1.9,1.9,1.9h7.5c7.2,0,13-5.8,13-13
+                       C314.4,29.6,308.6,23.8,301.4,23.8z M301.4,46.1h-5.6V27.5h5.6c5.1,0,9.3,4.2,9.3,9.3C310.7,42,306.5,46.1,301.4,46.1z"/>
+               <path class="st0" d="M324.5,25.7V48c0,1,0.8,1.9,1.9,1.9h15.5v-3.7h-13.7v-7.5h8.7V35h-8.7v-7.5h13.7v-3.7h-15.5
+                       C325.4,23.8,324.5,24.6,324.5,25.7z"/>
+               <path class="st0" d="M380.9,25.7V48c0,1,0.8,1.9,1.9,1.9h15.5v-3.7h-13.7v-7.5h8.7V35h-8.7v-7.5h13.7v-3.7h-15.5
+                       C381.8,23.8,380.9,24.6,380.9,25.7z"/>
+               <path class="st0" d="M363.2,23.8h-8.1c-1,0-1.9,0.8-1.9,1.9v24.2h3.7V38.7h6.2c4.1,0,7.5-3.3,7.5-7.5S367.3,23.8,363.2,23.8z
+                        M363.2,35H357v-7.5h6.2c2.1,0,3.7,1.7,3.7,3.7C366.9,33.3,365.2,35,363.2,35z"/>
+               <path class="st0" d="M427.4,23.8v19.1l-15.3-18.4c-0.5-0.6-1.3-0.8-2.1-0.6c-0.7,0.3-1.2,1-1.2,1.8v24.2h3.7V30.8l15.3,18.4
+                       c0.4,0.4,0.9,0.7,1.4,0.7c0.2,0,0.4,0,0.6-0.1c0.7-0.3,1.2-1,1.2-1.8V23.8H427.4z"/>
+               <path class="st0" d="M281.5,30.5c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1-0.1-0.1
+                       c0,0,0-0.1,0-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0,0,0-0.1-0.1c0,0-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1-0.1
+                       c0,0,0,0,0,0l-18.2-12.1c-0.6-0.4-1.3-0.4-1.9,0l-18.2,12.1c0,0,0,0,0,0c0,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0.1
+                       c0,0-0.1,0.1-0.1,0.1c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1-0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1
+                       c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.1,0,0.2v12.1c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1
+                       c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0.1,0,0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1
+                       c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0,0.1,0.1c0,0,0,0,0,0l18.2,12.1c0.3,0.2,0.6,0.3,0.9,0.3
+                       c0.3,0,0.7-0.1,0.9-0.3l18.2-12.1c0,0,0,0,0,0c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1
+                       c0,0,0,0,0.1-0.1c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0.1-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1
+                       c0,0,0-0.1,0-0.1c0,0,0,0,0-0.1c0-0.1,0-0.1,0-0.2V30.8C281.5,30.7,281.5,30.6,281.5,30.5C281.5,30.5,281.5,30.5,281.5,30.5z
+                        M261.7,40.9l-6-4l6-4l6,4L261.7,40.9z M259.9,29.8l-7.4,5l-6-4l13.4-8.9L259.9,29.8L259.9,29.8z M249.5,36.8l-4.3,2.9V34
+                       L249.5,36.8z M252.5,38.9l7.4,5v8l-13.4-8.9L252.5,38.9z M263.4,43.8l7.4-5l6,4l-13.4,8.9C263.4,51.8,263.4,43.8,263.4,43.8z
+                        M273.8,36.8l4.3-2.9v5.7L273.8,36.8z M270.8,34.8l-7.4-5v-8l13.4,8.9L270.8,34.8z"/>
+       </g>
+       <g>
+               <path class="st1" d="M47.3,45.7h-2V29.8h-5.9V28h13.9v1.8h-5.9V45.7z"/>
+               <path class="st1" d="M71.8,45.7l-5.1-6.9h-5.1v6.9h-2V28h7.6c3.9,0,6.4,2.1,6.4,5.3c0,3-2,4.7-4.8,5.2l5.4,7.2L71.8,45.7
+                       L71.8,45.7z M67,29.8h-5.5V37H67c2.7,0,4.6-1.4,4.6-3.7C71.6,31.1,69.9,29.8,67,29.8z"/>
+               <path class="st1" d="M87.3,45.7h-2v-7L77.9,28h2.4l6,8.9l6-8.9h2.3l-7.4,10.7C87.3,38.7,87.3,45.7,87.3,45.7z"/>
+               <path class="st1" d="M112.7,28v17.7h-2V28H112.7z"/>
+               <path class="st1" d="M127.2,45.7h-2V29.8h-5.9V28h13.9v1.8h-5.9L127.2,45.7L127.2,45.7z"/>
+               <path class="st1" d="M157.7,46c-5.4,0-9-4.2-9-9.1s3.7-9.2,9.1-9.2c5.4,0,9,4.2,9,9.1C166.8,41.7,163.1,46,157.7,46z M157.7,29.5
+                       c-4.1,0-6.9,3.2-6.9,7.3s2.9,7.3,7,7.3c4,0,6.9-3.2,6.9-7.3S161.8,29.5,157.7,29.5z"/>
+               <path class="st1" d="M186.6,28h1.9v17.7H187l-11.4-14.5v14.5h-1.9V28h1.9l11.2,14.2L186.6,28L186.6,28z"/>
+       </g>
+</g>
+</svg>

diff --git a/docs/assets/img/logos/cp2.svg b/docs/assets/img/logos/cp2.svg
new file mode 100644 (file)
index 0000000..a8f1f55
--- /dev/null
+++ b/docs/assets/img/logos/cp2.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="284.6px" height="73.7px" viewBox="0 0 284.6 73.7" style="enable-background:new 0 0 284.6 73.7;" xml:space="preserve">
+<style type="text/css">
+       .st0{fill:#FFFFFF;}
+       .st1{fill:#F1F2F2;}
+</style>
+<rect x="0" width="284.6" height="73.7"/>
+<g>
+       <path class="st0" d="M246.9,30.5v-0.1v-0.1v-0.1v-0.1c0,0,0-0.1-0.1-0.1v-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1l-0.1-0.1
+               c0,0,0,0-0.1-0.1l-0.1-0.1c0,0-0.1,0-0.1-0.1l0,0L228,17.2c-0.6-0.4-1.3-0.4-1.9,0l-18.2,12.1l0,0c0,0-0.1,0-0.1,0.1l-0.1,0.1
+               c0,0,0,0-0.1,0.1l-0.1,0.1c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1V30c0,0,0,0.1-0.1,0.1v0.1v0.1v0.1v0.1c0,0,0,0,0,0.1s0,0.1,0,0.2
+               v12.1c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0.1v0.1v0.1v0.1v0.1c0,0,0,0.1,0.1,0.1v0.1c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1l0.1,0.1
+               c0,0,0,0,0.1,0.1l0.1,0.1c0,0,0.1,0,0.1,0.1l0,0l18.2,12.1c0.3,0.2,0.6,0.3,0.9,0.3s0.7-0.1,0.9-0.3l18.2-12.1l0,0
+               c0,0,0.1,0,0.1-0.1l0.1-0.1c0,0,0,0,0.1-0.1l0.1-0.1c0,0,0,0,0.1-0.1c0,0,0-0.1,0.1-0.1v-0.1c0,0,0-0.1,0.1-0.1v-0.1v-0.1v-0.1
+               v-0.1c0,0,0,0,0-0.1s0-0.1,0-0.2V30.8C246.9,30.7,246.9,30.6,246.9,30.5L246.9,30.5z M227.1,40.9l-6-4l6-4l6,4L227.1,40.9z
+                M225.3,29.8l-7.4,5l-6-4l13.4-8.9V29.8L225.3,29.8z M214.9,36.8l-4.3,2.9V34L214.9,36.8z M217.9,38.9l7.4,5v8L211.9,43L217.9,38.9
+               z M228.8,43.8l7.4-5l6,4l-13.4,8.9C228.8,51.8,228.8,43.8,228.8,43.8z M239.2,36.8l4.3-2.9v5.7L239.2,36.8z M236.2,34.8l-7.4-5v-8
+               l13.4,8.9L236.2,34.8z"/>
+       <g>
+               <path class="st1" d="M45.7,45.7h-2V29.8h-5.9V28h13.9v1.8h-5.9L45.7,45.7L45.7,45.7z"/>
+               <path class="st1" d="M70.2,45.7l-5.1-6.9H60v6.9h-2V28h7.6c3.9,0,6.4,2.1,6.4,5.3c0,3-2,4.7-4.8,5.2l5.4,7.2H70.2L70.2,45.7z
+                        M65.4,29.8h-5.5V37h5.5c2.7,0,4.6-1.4,4.6-3.7C70,31.1,68.3,29.8,65.4,29.8z"/>
+               <path class="st1" d="M85.7,45.7h-2v-7L76.3,28h2.4l6,8.9l6-8.9H93l-7.4,10.7C85.7,38.7,85.7,45.7,85.7,45.7z"/>
+               <path class="st1" d="M111.1,28v17.7h-2V28H111.1z"/>
+               <path class="st1" d="M125.6,45.7h-2V29.8h-5.9V28h13.9v1.8h-5.9L125.6,45.7L125.6,45.7z"/>
+               <path class="st1" d="M156.1,46c-5.4,0-9-4.2-9-9.1s3.7-9.2,9.1-9.2c5.4,0,9,4.2,9,9.1S161.5,46,156.1,46z M156.1,29.5
+                       c-4.1,0-6.9,3.2-6.9,7.3s2.9,7.3,7,7.3c4,0,6.9-3.2,6.9-7.3S160.2,29.5,156.1,29.5z"/>
+               <path class="st1" d="M185,28h1.9v17.7h-1.5L174,31.2v14.5h-1.9V28h1.9l11.2,14.2L185,28L185,28z"/>
+       </g>
+</g>
+</svg>

diff --git a/docs/assets/img/logos/cp3.svg b/docs/assets/img/logos/cp3.svg
new file mode 100644 (file)
index 0000000..7daaa0f
--- /dev/null
+++ b/docs/assets/img/logos/cp3.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="72px" height="72px" viewBox="0 0 72 72" style="enable-background:new 0 0 72 72;" xml:space="preserve">
+<style type="text/css">
+       .st0{fill:#FFFFFF;}
+</style>
+<rect width="72" height="72"/>
+<path class="st0" d="M55.9,29.7v-0.1v-0.1v-0.1v-0.1c0,0,0-0.1-0.1-0.1v-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1-0.1l-0.1-0.1
+       c0,0,0,0-0.1-0.1l-0.1-0.1c0,0-0.1,0-0.1-0.1l0,0L36.9,16.4c-0.6-0.4-1.3-0.4-1.9,0L16.8,28.5l0,0c0,0-0.1,0-0.1,0.1l-0.1,0.1
+       c0,0,0,0-0.1,0.1l-0.1,0.1c0,0,0,0-0.1,0.1c0,0,0,0.1-0.1,0.1v0.1c0,0,0,0.1-0.1,0.1v0.1v0.1v0.1v0.1c0,0,0,0,0,0.1s0,0.1,0,0.2
+       v12.1c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0.1v0.1v0.1v0.1v0.1c0,0,0,0.1,0.1,0.1V43c0,0,0,0.1,0.1,0.1c0,0,0,0,0.1,0.1l0.1,0.1
+       c0,0,0,0,0.1,0.1l0.1,0.1c0,0,0.1,0,0.1,0.1l0,0L35,55.6c0.3,0.2,0.6,0.3,0.9,0.3s0.7-0.1,0.9-0.3L55,43.5l0,0c0,0,0.1,0,0.1-0.1
+       l0.1-0.1c0,0,0,0,0.1-0.1l0.1-0.1c0,0,0,0,0.1-0.1c0,0,0-0.1,0.1-0.1v-0.1c0,0,0-0.1,0.1-0.1v-0.1v-0.1v-0.1v-0.1c0,0,0,0,0-0.1
+       s0-0.1,0-0.2V30C55.9,29.9,55.9,29.8,55.9,29.7L55.9,29.7z M36.1,40.1l-6-4l6-4l6,4L36.1,40.1z M34.3,29l-7.4,5l-6-4l13.4-8.9V29
+       L34.3,29z M23.9,36l-4.3,2.9v-5.7L23.9,36z M26.9,38.1l7.4,5v8l-13.4-8.9L26.9,38.1z M37.8,43l7.4-5l6,4l-13.4,8.9
+       C37.8,51,37.8,43,37.8,43z M48.2,36l4.3-2.9v5.7L48.2,36z M45.2,34l-7.4-5v-8l13.4,8.9L45.2,34z"/>
+</svg>

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 0e9ae8f25daf18adbf71038083f64c9beed45881..04db420961d67f851f42a6cf51084c647fe23006 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -157,3 +157,19 @@ a#notice {
   }
 }
 
+.codepen-logo-link {
+  position: relative;
+  bottom: -1rem;
+  display: flex;
+  justify-content: flex-end;
+
+  &.left {
+    justify-content: flex-start;
+    bottom: 0;
+  }
+
+  img {
+    max-width: 200px;
+    height: 32px;
+  }
+}

diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md
index 63dfaa46cb87ff6d41940953327055726caabb52..ad7ab7eb24ec8140505c2f6f8d3aa0e59ab1857d 100644 (file)
--- a/docs/pages/flexbox.md
+++ b/docs/pages/flexbox.md
@@ -66,6 +66,8 @@ To understand how these classes work, you need to understand the parent-child re
 
 Here's a basic example: when using the grid, a row is a flex parent, and a column is a flex child.
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/XRZOjE?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html
 <div class="row">
   <div class="column"></div>
@@ -110,6 +112,8 @@ Horizontal alignment classes are applied to flex parents. Left alignment is the
   </div>
 </div>
 
+<a class="codepen-logo-link left" href="http://codepen.io/ZURBFoundation/pen/WjMmvM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 You might be wondering what the difference between `.align-justify` and `.align-spaced` is. A justified grid (`justify-content: space-between`) evenly distributes the space *between* each column. The first and last columns pin to the edge of the grid.
 
 A spaced grid (`justify-content: space-around`) evenly distributes the space *around* each column. This means there will always be space to the left of the first column, and to the right of the last column.
@@ -133,6 +137,8 @@ Stretch alignment is the default. To set parent alignment, use these classes:
   <p>Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". As we can't have two CSS classes with the same name, thus we are using different terms.</p>
 </div>
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/pPaYwQ" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="row align-middle">
   <div class="columns">I'm in the middle!</div>
@@ -156,6 +162,8 @@ To align an individual child, use the below classes. They use the same alignment
 - `.align-self-bottom`
 - `.align-self-stretch`
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/zwRbjY?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="row">
   <div class="column align-self-bottom">Align bottom</div>
@@ -168,14 +176,16 @@ To align an individual child, use the below classes. They use the same alignment
 
 ### Central Alignment
 
-Central alignment can be applied to a flex parent, which will centrally align all children's automatically. To set this to your layout, simply use the class: `.align-center-middle`.
+Central alignment can be applied to a flex parent, which will centrally align all children horizontally and vertically automatically. To set this to your layout, simply use the class: `.align-center-middle`.
 
 <div class="primary callout">
   <p>We are using `.text-center` class just for demo purposes here.</p>
 </div>
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/pPamOp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
-<div class="row align-center-middle text-center">
+<div class="row align-center-middle text-center" style="height: 200px;">
   <div class="columns small-4">I am in the center-middle</div>
   <div class="columns small-4">I am also centrally located</div>
 </div>
@@ -198,12 +208,14 @@ And to change its flex direction from row to column you can use the helper class
 - `.flex-dir-column`
 - `.flex-dir-column-reverse`
 
-For children, there are 3 quick helper classes
+For children, there are 3 quick helper classes to apply the flex property. These control how the containers take up space relative to their siblings:
 
 - `.flex-child-auto` (auto size flex child)
 - `.flex-child-grow` (flex child that will grow to take up all possible space)
 - `.flex-child-shrink` (flex child that will shrink to minimum possible space)
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/jmZoQa?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="row">
   <div class="column flex-container flex-dir-column">
@@ -217,19 +229,25 @@ For children, there are 3 quick helper classes
 </div>
 ```
 
-All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints.  So you can do things like
+All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints. So you can do things like:
+
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/pPaXEO?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
 
 ```html_example
-  <div class="row">
-    <div class="column large-12 flex-container flex-dir-column large-flex-dir-row">
-      <div class="callout flex-child-auto">Auto</div>
-      <div class="callout flex-child-auto">Auto</div>
-      <div class="callout flex-child-shrink large-flex-child-auto">Auto on Large</div>
-    </div>
-    <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
+<div class="row">
+  <div class="column large-12 flex-container flex-dir-column large-flex-dir-row">
+    <div class="callout flex-child-auto">Auto</div>
+    <div class="callout flex-child-auto">Auto</div>
+    <div class="callout flex-child-shrink large-flex-child-auto">Auto on Large</div>
   </div>
+  <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
+</div>
 ```
 
+<div class="primary callout">
+  <p>Foundation's CSS is mobile first, so setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint. Example: `class="flex-child-shrink large-flex-child-auto"` will be shrink on the small and medium breakpoints and then auto on large.</p>
+</div>
+
 ---
 
 ## Helper Mixins