updates orbit docs page, adds animation-free example as well as changing default...

diff --git a/docs/pages/orbit.md b/docs/pages/orbit.md
index cc1e5b6c5b55e2d5771cd8f63a8db87a339e72d4..ec6a3f8a29e4678f4a425e5c64f96f85f4d51daf 100644 (file)
--- a/docs/pages/orbit.md
+++ b/docs/pages/orbit.md
@@ -10,8 +10,17 @@ tags:
 ---
 
 ## Basic Orbit Slider
+<div class="callout"><p>
+  The new Orbit slider was designed to be a tool for rapid prototyping. While you are welcome to use it in production, if you want something more robust, we welcome you to try [Owl Carousel](http://owlgraphic.com/owlcarousel/).
+</p>
+<div class="callout alert">
+  <p>
+    If animations are desired with the Orbit slider, such as the example below, [Motion-UI](https://github.com/zurb/motion-ui) is required. If you want a simple slide replacement, set the option `useMUI` to false for animation free slides.
+  </p>
+</div>
+</div>
 
-<div class="orbit" role="region" aria-label="Favorite Nicolas Cage Pictures" data-orbit>
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
   <ul class="orbit-container">
     <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
     <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
@@ -41,36 +50,36 @@ tags:
 </div>
 
 ```html_example
-<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
   <ul class="orbit-container">
     <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
     <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
     <li class="is-active orbit-slide">
       <div>
-        <h3 class="text-center">You can also throw some text in here!</h3>
-        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
-        <h3 class="text-center">This Orbit slide has chill</h3>
+        <h3 class="text-center">1: You can also throw some text in here!</h3>
+        <p class="text-center">Achieve an animation-free Orbit with the data attribute data-use-m-u-i="false"</p>
+        <h3 class="text-center">This Orbit slider does not use animations.</h3>
       </div>
     </li>
     <li class="orbit-slide">
       <div>
-        <h3 class="text-center">You can also throw some text in here!</h3>
+        <h3 class="text-center">2: You can also throw some text in here!</h3>
         <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
-        <h3 class="text-center">This Orbit slide has chill</h3>
+        <h3 class="text-center">This Orbit slider does not use animations.</h3>
       </div>
     </li>
     <li class="orbit-slide">
       <div>
-        <h3 class="text-center">You can also throw some text in here!</h3>
+        <h3 class="text-center">3: You can also throw some text in here!</h3>
         <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
-        <h3 class="text-center">This Orbit slide has chill</h3>
+        <h3 class="text-center">This Orbit slider does not use animations.</h3>
       </div>
     </li>
     <li class="orbit-slide">
       <div>
-        <h3 class="text-center">You can also throw some text in here!</h3>
+        <h3 class="text-center">4: You can also throw some text in here!</h3>
         <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
-        <h3 class="text-center">This Orbit slide has chill</h3>
+        <h3 class="text-center">This Orbit slider does not use animations.</h3>
       </div>
     </li>
   </ul>
@@ -82,3 +91,38 @@ tags:
  </nav>
 </div>
 ```
+
+## Changing Default Animations
+
+<p>
+  This example uses Motion-UI's fade-[in/out] animations to change slides, instead of the default slide-[left/right]. This is achieved with setting the animation options with the `data-options` attribute: `data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;"`
+</p>
+<br>
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
+  <ul class="orbit-container">
+    <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
+    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
+    <li class="is-active orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit-1.jpg" alt="Space">
+      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
+    </li>
+    <li class="orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit-2.jpg" alt="Space">
+      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
+    </li>
+    <li class="orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit-3.jpg" alt="Space">
+      <figcaption class="orbit-caption">Encapsulating</figcaption>
+    </li>
+    <li class="orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit-4.jpg" alt="Space">
+      <figcaption class="orbit-caption">Outta This World</figcaption>
+    </li>
+  </ul>
+  <nav class="orbit-bullets">
+   <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+   <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+   <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+   <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+ </nav>
+</div>