zurb-foundation 4.1.6 → 4.2.0

data/docs/components/grid.html.erb

@@ -177,7 +177,7 @@
   <div class="small-6 large-centered columns">6 centered</div>
 </div>
 <div class="row">
-  <div class="small-9 small-centered columns">9 centered</div>
+  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
 </div>
 <div class="row">
   <div class="small-11 small-centered columns">11 centered</div>
@@ -249,7 +249,7 @@
         <hr>
 
         <h4>Small Grid</h4>
-        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
+        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a target="_blank" href="https://github.com/zurb/foundation/tree/master/scss/foundation/components">_grid.scss</a> from Github and throw them into a Foundation folder in your project directory.</p>
 
 <%= code_example '
 <div class="row">

data/docs/components/inline-lists.html.erb

@@ -41,10 +41,10 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_inline-lists.scss">_inline-lists.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/foundation-global", "foundation/components/global", "foundation/components/inline-lists";
+@import "foundation/variables", "foundation/components/global", "foundation/components/inline-lists";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -78,7 +78,7 @@ $inline-list-display:          block;
 /* We use this to control any elements within list items */
 $inline-list-children-display: block;', :css %>
 
-        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/interchange.html.erb

@@ -0,0 +1,127 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Interchange" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Interchange uses media queries to load the images that are appropriate for a user's browsers, making responsive images a snap.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <p><img src="../img/demos/interchange/default.jpg" data-interchange="[../img/demos/interchange/default.jpg, (default)], [../img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], [../img/demos/interchange/small.jpg, (small)], [../img/demos/interchange/med.jpg, (medium)], [../img/demos/interchange/large.jpg, (large)]"></p>
+
+        <h3>Using <code>data-interchange</code></h3>
+        <p>The Foundation Interchange component utilizes the <code>data-interchange</code> attribute for specifying your media queries and respect images.</p>
+
+<%= code_example '
+<img src="/path/to/default.jpg" data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">
+', :html %>
+
+        <p>Each rule passed to <code>data-interchange</code> is comma delimited and incapsulated in square brackets, and each argument within a rule is also comma delimited. The first parameter is the path to your image, and the second parameter is your media query, surrounded by parenthesis.</p>
+
+<%= code_example '
+data-interchange="[image_path, (media query)], [image_path, (media query)]"
+', :html %>
+
+        <p><strong>The last rule that evaluates to true will be the image that gets loaded.</strong> We recommend that you set your image <code>src</code> to the smallest one, as this will always get loaded.</p>
+
+        <h3>Named Queries</h3>
+
+        <p>Interchange has a few built-in shortcuts that correlate with our visibility classes.</p>
+
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Media Query</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>default</td>
+              <td><code>only screen and (min-width: 1px)</code></td>
+            </tr>
+            <tr>
+              <td>small</td>
+              <td><code>only screen and (min-width: 768px)</code></td>
+            </tr>
+            <tr>
+              <td>medium</td>
+              <td><code>only screen and (min-width: 1280px)</code></td>
+            </tr>
+            <tr>
+              <td>large</td>
+              <td><code>only screen and (min-width: 1440px)</code></td>
+            </tr>
+            <tr>
+              <td>landscape</td>
+              <td><code>only screen and (orientation: landscape)</code></td>
+            </tr>
+            <tr>
+              <td>portrait</td>
+              <td><code>only screen and (orientation: portrait)</code></td>
+            </tr>
+          </tbody>
+        </table>
+
+        <p>To use the named queries, just pass the name in where you would normally specify your query.</p>
+
+<%= code_example '
+data-interchange="[image_path, (large)], [image_path, (landscape)]"
+', :html %>
+
+        <h3>Custom Named Queries</h3>
+
+        <p>Custom queries can be defined during initialization. You can also override the default queries in this way:</p>
+
+<%= code_example "
+$(document).foundation('interchange', {
+  named_queries : {
+    my_custom_query : 'only screen and (max-width: 200px)'
+  }
+});
+", :js %>
+
+        <h3>Events</h3>
+
+        <p>Interchange triggers a <code>replace</code> event when a rule evaluates to true and the image has been replaced.</p>
+
+<%= code_example "
+$(document).on('replace', 'img', function (e, new_path, original_path) {
+  console.log(e.currentTarget, new_path, original_path);
+});
+", :js %>
+
+        <h3>Adding new images after page load</h3>
+
+        <p>If you add new images after the page has been loaded, you will need to trigger a <code>reflow</code> by running one of the following:</p>
+
+<%= code_example "
+$(document).foundation('interchange', 'reflow');
+
+// OR for all Foundation components
+
+$(document).foundation('reflow');
+", :js %>
+
+        <h3>Using the JavaScript</h3>
+
+        <p>Interchange requires the Foundation Core, <code>foundation.js</code> and the <code>foundation.interchange.js</code> component to function.</p>
+
+        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/keystrokes.html.erb

@@ -28,10 +28,10 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/foundation-global", "foundation/components/global", "foundation/components/keystrokes";
+@import "foundation/variables", "foundation/components/global", "foundation/components/keystrokes";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -65,7 +65,7 @@ $keystroke-border-width:    1px;
 $keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor);
 $keystroke-radius:          $global-radius;', :css %>
 
-        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/kitchen-sink.html.erb

@@ -489,7 +489,7 @@
               <section class="section">
                 <p class="title"><a href="#panel3">Section 3</a></p>
                 <div class="content" data-slug="panel3">
-                  <p>Section 2. 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.</p>
+                  <p>Section 3. 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.</p>
                 </div>
               </section>
             </div>
@@ -509,7 +509,7 @@
               <section class="section">
                 <p class="title"><a href="#panel3">Section 3</a></p>
                 <div class="content" data-slug="panel3">
-                  <p>Section 2. 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.</p>
+                  <p>Section 3. 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.</p>
                 </div>
               </section>
             </div>

data/docs/components/labels.html.erb

@@ -43,10 +43,10 @@
         <hr>
 
         <h3>Build With Our Mixins</h3>
-        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_labels.scss">_labels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_labels.scss">_labels.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/foundation-global", "foundation/components/global", "foundation/components/labels";
+@import "foundation/variables", "foundation/components/global", "foundation/components/labels";
 ', :css %>
 
         <h5>Quick Mixin</h5>
@@ -90,7 +90,7 @@ $label-font-weight: bold;
 $label-font-color: #333;
 $label-font-color-alt: #fff;', :css %>
 
-        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>

data/docs/components/orbit.html.erb

@@ -9,6 +9,8 @@
         <h2><%= @page_title %></h2>
         <h4 class="subheader">Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.</h4>
 
+        <div class="slideshow-wrapper">
+        <span class="preloader"></span>
         <ul id="featured1" data-orbit data-options="timer_speed:5000;">
           <li>
             <img src="../img/demos/demo1.jpg" />
@@ -29,6 +31,7 @@
             </div>
           </li>
         </ul>
+        </div>
 
         <hr>
 
@@ -42,7 +45,6 @@
         <p>Building Orbit is pretty simple using our HTML classes and structure; you'll just need to write the markup, find some images or text, fire up the Javascript and you'll be ready to go. On touch-enabled devices, Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS. Here's markup structure for Orbit:</p>
 
 <%= code_example '
-<!-- Basic orbit markup -->
 <ul data-orbit>
   <li>
     <img src="../img/demos/demo1.jpg" />
@@ -155,7 +157,7 @@
         </p>
 
 <%= code_example '
-<ul id="featured2" data-orbit>
+<ul data-orbit>
   <li data-orbit-slide="headline-1">
     <h2>Headline 1</h2>
     <h3>Subheadline</h3>
@@ -183,13 +185,40 @@
 
         <hr>
 
+        <h3>Graceful Loading &amp; Preloader</h3>
+        <p>We've cleaned up how Orbit initializes by adding a wrapper feature that stops the ugly flash of unstyled content. Here's the markup needed:</p>
+
+<%= code_example '
+<div class="slideshow-wrapper">
+  <ul id="featured2" data-orbit>
+    <!-- Orbit slides -->
+  </ul>
+</div>
+', :html %>
+
+        <p>To add the preloader, simply include a <code>div class="preloader"</code> right inside the wrapper, like so:</p>
+
+<%= code_example '
+<div class="slideshow-wrapper">
+  <div class="preloader"></div>
+  <ul data-orbit>
+    <!-- Orbit slides -->
+  </ul>
+</div>
+', :html %>
+
+        <div class="slideshow-wrapper" style="height: 200px; border: solid 1px #ddd">
+          <div class="preloader"></div>
+        </div>
+
+        <hr>
+
         <h3>Available SCSS Variables</h3>
         <p>We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.</p>
 
 <%= code_example '
 /* We use these to control the caption styles */
 $orbit-container-bg: #f5f5f5;
-$orbit-caption-bg-old-browser: #000;
 $orbit-caption-bg-old: rgb(0,0,0);
 $orbit-caption-bg: rgba(0,0,0,0.6);
 $orbit-caption-font-color: #fff;
@@ -207,12 +236,13 @@ $orbit-bullet-nav-color: #999;
 $orbit-bullet-nav-color-active: #222;
 
 /* We use thes to controls the style of slide numbers */
-$orbit-slide-number-bg: rgb(0,0,0);
+$orbit-slide-number-bg: rgba(0,0,0,0);
 $orbit-slide-number-font-color: #fff;
 $orbit-slide-number-padding: emCalc(5px);
 
-// Margin for when Orbit is stacked on small screens
-$stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function right now
+/* Graceful Loading Wrapper and preloader */
+$wrapper-class: "slideshow-wrapper";
+$preloader-class: "preloader";
 ', :css %>
 
         <hr>
@@ -237,8 +267,10 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
         <p>Orbit options can only be passed in during initialization at this time.</p>
 
 <%= code_example "
-{
+$(document).foundation('orbit', {
   timer_speed: 10000,
+  pause_on_hover: true,
+  resume_on_mouseout: true,
   animation_speed: 500,
   bullets: true,
   stack_on_small: true,
@@ -256,7 +288,7 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
   caption_class: 'orbit-caption',
   active_slide_class: 'active',
   orbit_transition_class: 'orbit-transitioning'
-}", :js %>
+});", :js %>
 
     <p>Starting in 4.0.7 you can also use the <code>data-options</code> attribute to pass configuration settings to Orbit. Treat it like a <code>style</code> property:</p>
 
@@ -266,6 +298,86 @@ $stack-on-small-margin-bottom: emCalc(20px); // Stack on small does not function
 </ul>
 ', :html %>
 
+<h3>Events</h3>
+<p>You can bind to the following events in your code.</p>
+
+<table style="width:100%;">
+  <thead>
+    <tr>
+      <th>Event</th>
+      <th>Params</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>orbit:ready</td>
+      <td>event</td>
+      <td>Fires when the slider has loaded</td>
+    </tr>
+    <tr>
+      <td>orbit:before-slide-change</td>
+      <td>event</td>
+      <td>Fires before a slide changes</td>
+    </tr>
+    <tr>
+      <td>orbit:after-slide-change</td>
+      <td>event, orbit</td>
+      <td>Fires after a slide transition animation has finished. The <code>orbit</code> parameter contains <code>slide_number</code> and <code>total_slides</code>.</td>
+    </tr>
+    <tr>
+      <td>orbit:timer-started</td>
+      <td>event</td>
+      <td>Fires each time the timer is started/resumed</td>
+    </tr>
+    <tr>
+      <td>orbit:timer-stopped</td>
+      <td>event</td>
+      <td>Fires each time the timer is paused/stopped</td>
+    </tr>
+  </tbody>
+</table>
+
+<h5>Example</h5>
+<p>Here's an example of how you can bind to these events:</p>
+
+<%= code_example '<ul id="featured1" data-orbit>
+  <li>
+    <img src="../img/demos/demo1.jpg" />
+    <div class="orbit-caption">...</div>
+  </li>
+  <li>
+    <img src="../img/demos/demo2.jpg" />
+    <div class="orbit-caption">...</div>
+  </li>
+  <li>
+    <img src="../img/demos/demo3.jpg" />
+    <div class="orbit-caption">...</div>
+  </li>
+</ul>
+
+<script>
+$("#featured1").on("orbit:ready", function(event) {
+  console.info("ready");
+});
+$("#featured1").on("orbit:before-slide-change", function(event) {
+  console.info("before slide change");
+});
+$("#featured1").on("orbit:after-slide-change", function(event, orbit) {
+  console.info("after slide change");
+  console.info("slide " + orbit.slide_number + " of " + orbit.total_slides);
+});
+$("#featured1").on("orbit:timer-started", function(event, orbit) {
+  console.info("timer started");
+});
+$("#featured1").on("orbit:timer-stopped", function(event, orbit) {
+  console.info("timer stopped");
+});
+</script>
+', :html %>
+
+
+
       </div>
     </div>
 

data/docs/components/pagination.html.erb

@@ -88,10 +88,10 @@
         <hr>
 
         <h3>Build with a Mixin</h3>
-        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_variables.scss">_variables.scss</a>, <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss">_global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
 
 <%= code_example '
-@import "foundation/foundation-global", "foundation/components/global", "foundation/components/pagination";
+@import "foundation/variables", "foundation/components/global", "foundation/components/pagination";
 ', :css %>
 
         <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>
@@ -161,7 +161,7 @@ $pagination-link-font-color:             #999;
 $pagination-link-active-bg:              darken(#fff, 10%);
 
 /* We use these for disabled anchor links */
-$pagination-link-unavailable-cursor:     default;
+$pagination-link-unavailable-cursor:     $cursor-default-value;
 $pagination-link-unavailable-font-color: #999;
 $pagination-link-unavailable-bg-active:  transparent;
 
@@ -169,10 +169,10 @@ $pagination-link-unavailable-bg-active:  transparent;
 $pagination-link-current-background:     $primary-color;
 $pagination-link-current-font-color:     #fff;
 $pagination-link-current-font-weight:    bold;
-$pagination-link-current-cursor:         default;
+$pagination-link-current-cursor:         $cursor-default-value;
 $pagination-link-current-active-bg:      $primary-color;', :css %>
 
-        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 
       </div>
     </div>