Refine and clean up docs pages for accordion, equalizer, magellan, and orbit

diff --git a/docs/assets/scss/_orbit.scss b/docs/assets/scss/_orbit.scss
new file mode 100644 (file)
index 0000000..c5be058
--- /dev/null
+++ b/docs/assets/scss/_orbit.scss
@@ -0,0 +1,22 @@
+// Examples for the Orbit documentation.
+
+.docs-example-orbit-slide {
+  padding: 2rem 4rem;
+  color: $white;
+
+  .orbit-slide:nth-of-type(1) & {
+    background: dodgerblue;
+  }
+
+  .orbit-slide:nth-of-type(2) & {
+    background: rebeccapurple;
+  }
+
+  .orbit-slide:nth-of-type(3) & {
+    background: darkgoldenrod;
+  }
+
+  .orbit-slide:nth-of-type(4) & {
+    background: lightseagreen;
+  }
+}

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index bff76b2771a512c01bd7b49d238d518939637961..b2031c2e37526f0162b2b93f8573d7ce80d01afc 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -11,8 +11,6 @@
 @import 'foundation';
 @import 'motion-ui';
 
-$-zf-flex-classes-imported: true;
-
 @include foundation-everything;
 @include foundation-flex-classes;
 @include foundation-range-input;
@@ -21,6 +19,7 @@ $-zf-flex-classes-imported: true;
 @include motion-ui-transitions;
 
 @import 'foundation-docs';
+@import 'orbit';
 
 .docs-newsletter { margin-top: 0 !important; }
 #subForm { margin-top: 1rem; }
@@ -106,7 +105,7 @@ a.notice {
   position: relative;
   padding: 1rem 0;
   width:100%;
-  background: url(../img/inky-banner-bg-boat.svg) no-repeat center center; 
+  background: url(../img/inky-banner-bg-boat.svg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -128,8 +127,8 @@ a.notice {
     margin-left: auto;
     margin-right: auto;
 
-    h5 { 
-      color: #ffffff; 
+    h5 {
+      color: #ffffff;
       text-align: center;
       margin-bottom: 0 !important;
     }

diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md
index ac940b9bb899504328b2a68faa0bb5383d6c73fa..27a2078f58f81b60e95efe6d52861c39024840fa 100644 (file)
--- a/docs/pages/accordion.md
+++ b/docs/pages/accordion.md
@@ -13,13 +13,10 @@ The container for an accordion needs the class `.accordion`, and the attribute `
 <ul class="accordion" data-accordion></ul>
 ```
 
-The default class for an accordion section is `.accordion-item`. Inside each section is a title, default `.accordion-title`, and corresponding content pane `.accordion-content`. Please note, the only opinionated component here is the use of an anchor `<a></a>` for the title link, which controls the opening and closing of the pane. You can include your own attributes, or our JavaScript will assign it for you. JS assigned attributes include unique id's, aria attributes, and roles. You do still need to include the `data-tab-content` attribute for your content pane.
+Inside the accordion, place a series of panes with the class `.accordion-item` and the attribute `data-accordion-item`. To mark which pane should be open by default, add the class `.is-active` to that pane.
 
-Note that the `data-accordion-item` attribute on each list item is required when not using `<li>`.
+Each pane has a **title**, an `<a>` with the class `.accordion-title`, and a **content area**, an element with the class `.accordion-content` and the attribute `data-tab-content`.
 
-Loading a page with an open pane is achieved by adding the `is-active` class to one, (or more, if using the multiExpand option), `.accordion-item` element.
-
-This is the minimum markup for creating an Accordion with Foundation, repeating the `accordion-item`, `accordion-title`, and `accordion-content` elements as many times as you require.
 ```html
 <ul class="accordion" data-accordion>
   <li class="accordion-item is-active" data-accordion-item>
@@ -64,7 +61,7 @@ Once you put it all together, here's what you get!
 
 ### Multi-expand
 
-By default, only one pane of an accordion can be open at a time. This can be changed with the `multiExpand` setting.
+By default, only one pane of an accordion can be open at a time. This can be changed by setting the `multiExpand` option to `true`.
 
 ```html
 <ul class="accordion" data-accordion data-multi-expand="true">
@@ -97,7 +94,7 @@ By default, only one pane of an accordion can be open at a time. This can be cha
 
 ### All Closed
 
-By default, at least one pane in an accordion must be open. This can be changed with the `allowAllClosed` setting.
+By default, at least one pane in an accordion must be open. This can be changed by setting `allowAllClosed` option to `true`.
 
 ```html
 <ul class="accordion" data-accordion data-allow-all-closed="true">

diff --git a/docs/pages/equalizer.md b/docs/pages/equalizer.md
index 59438699fb9eb4129f3cb282772f0574677ce3f3..3d71bd292372d533a0cd4feea4054d225ede7218 100644 (file)
--- a/docs/pages/equalizer.md
+++ b/docs/pages/equalizer.md
@@ -28,6 +28,8 @@ To set up an Equalizer group, you need a container, which gets the attribute `da
 </div>
 ```
 
+---
+
 ## Nesting
 
 To use one Equalizer inside another, each container needs a unique ID, assigned with the `data-equalizer` attribute. Each `data-equalizer-watch` element should then have a value that matches its parent.
@@ -80,52 +82,27 @@ In the below example, the first set of Equalizer elements have the value `foo`,
   </div>
 </div>
 
-## Responsive Equalizer
-### Equalize row by row
+---
 
-Equalize elements on a per-row basis. Please note, that because this involves quite a bit of looping through elements, you may notice a performance decrease by using this feature and resizing your screen rapidly.
+## Equalize By Row
 
-<div class="callout success">
-  <strong>Works great with Block-Grid</strong>
-</div>
+If you have a gallery of items that wrap multiple times, Equalizer can be configured to match each row's items in height. Works great with the block grid!
 
 <div class="callout primary">
-  <strong>Under the Hood</strong><br>
-  <p>Equalizer splits the `data-equalizer-watch` elements into groups by checking the top position and then sets the max height to each element in a row</p>
-  <p>Be aware on what you set the `data-equalizer-watch`, if the top position is different, equalizer will interpret that as a new 'row' and equalize accordingly.</p>
+  <p><strong>Under the Hood:</strong></p>
+  <p>Equalizer splits the `data-equalizer-watch` elements into groups by checking their vertical offsets, and grouping ones with the same offset into a "row".</p>
+  <p>Be aware on what you set `data-equalizer-watch`, if the top position is different, Equalizer will interpret that as a new "row" and equalize accordingly.</p>
 </div>
 
-```html_example
-<div class="row" data-equalizer data-equalize-by-row="true">
-  <div class="small-12 medium-6 large-4 columns">
-    <div class="callout clearfix">
-      <div data-equalizer-watch>
-        <h5>Login</h5>
-        <p>Login Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt magni quia unde laboriosam tempore et quibusdam. Quibusdam maxime sit atque!</p>
-      </div>
-      <a href="#" class="button success expanded">Login</a> </div>
-  </div>
-  <div class="small-12 medium-6 large-4 columns">
-    <div class="callout clearfix">
-      <div data-equalizer-watch>
-        <h5>Create Account</h5>
-        <p>You can create an account here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, assumenda, molestiae. Laboriosam et exercitationem, veniam odit, dicta illum corporis, placeat voluptates fuga, expedita distinctio quae magnam temporibus porro quas eius.</p>
-      </div>
-      <a href="#" class="button expanded">Create account</a> </div>
-  </div>
-  <div class="small-12 medium-12 large-4 columns">
-    <div class="callout clearfix">
-      <div data-equalizer-watch>
-        <h5>Social Login</h5>
-        <p>Social Networks Login Text</p>
-      </div>
-      <a href="#" class="button hollow expanded">Login</a> </div>
-  </div>
+```html
+<div class="row small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
+  <div class="column"></div>
+  <div class="column"></div>
+  <div class="column"></div>
+  <!-- ... -->
 </div>
 ```
-<br>
-<hr>
-<p class="lead">Equalized Block Grid</p>
+
 <div class="row small-up-1 medium-up-2 large-up-4" data-equalizer data-equalize-by-row="true">
   <div class="column">
     <div class="callout" data-equalizer-watch>

diff --git a/docs/pages/magellan.md b/docs/pages/magellan.md
index aff2bb4993b345d7a941a363f049ff97217657d2..5262922c73d158d8271334ab48e1dba4d035ff35 100644 (file)
--- a/docs/pages/magellan.md
+++ b/docs/pages/magellan.md
@@ -5,6 +5,7 @@ js: js/foundation.magellan.js
 tags:
   - navigation
 ---
+
 <div data-sticky-container>
   <div class="sticky" id="sticky-magellan" style="width:100%;" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="setup" data-btm-anchor="destroy:bottom">
     <nav data-magellan class="sticky-mag" data-bar-offset="25">
@@ -17,6 +18,8 @@ tags:
   </div>
 </div>
 
+<br>
+
 ## Setup
 
 You can use Magellan with any navigation element, like our [Menu](menu.html) or your own custom component. Just add the attribute `data-magellan` to the container, and links to specific sections of your page. Each section needs a unique ID.
@@ -34,9 +37,13 @@ You can use Magellan with any navigation element, like our [Menu](menu.html) or
 </div>
 ```
 
+---
+
 ## Sticky Navigation
 
-You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar. The first example is a simplified version of the table of contents on the right side of this page, the second is the menu bar floating at the top of the page.
+You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.
+
+This first example is a simplified version of the table of contents on the right side of this page:
 
 ```html
 <div class="large-3 columns" data-sticky-container>
@@ -48,9 +55,11 @@ You can use Magellan with our Sticky plugin to create a persistent navigation he
     </ul>
   </nav>
 </div>
+```
 
+This example is the menu bar floating at the top of the page.
 
-
+```html
 <div data-sticky-container>
   <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
     <nav data-magellan>

diff --git a/docs/pages/orbit.md b/docs/pages/orbit.md
index f0f7fce8ef2209ac8ab70d1a4a3df4de0a0882c3..ad1254d5f915c5fad537bf0ff7c2ed1f047a1453 100644 (file)
--- a/docs/pages/orbit.md
+++ b/docs/pages/orbit.md
@@ -1,6 +1,6 @@
 ---
 title: Orbit
-description: The slider you want, the slider you need.
+description: An image and content carousel with animation support and many customizable options.
 sass: scss/components/_orbit.scss
 js: js/foundation.orbit.js
 mui: true
@@ -9,21 +9,15 @@ tags:
   - carousel
 ---
 
-## 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>
+## Basics
+
+Orbit doesn't automatically generate any HTML for you, giving you the flexibility to move around the various pieces of the plugin. Here's a complete example&mdash;we'll break down the individual pieces farther down.
 
+```html_example
 <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;&#xFE0E;</button>
-    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
     <li class="is-active orbit-slide">
       <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
       <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
@@ -42,47 +36,161 @@ tags:
     </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>
+    <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>
+```
 
-```html_example
-<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
+---
+
+### Wrapper
+
+The wrapper houses the entire carousel. We use the `aria-label` attribute to label what the carousel is, for assistive technology.
+
+```html
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+</div>
+```
+
+### Slide Container
+
+The slide container houses each individual slide. In our above markup example, we also placed the buttons in here, so we can anchor them to the center edge of the slide container. However, they can be moved anywhere within the `data-orbit` wrapper.
+
+Each slide is an `<li>` with the class `.orbit-slide`. The first slide is marked with the `.is-active` class to indicate it's the default. You can place any HTML you want inside of the slide, but we have some premade styles for image-based slides with a caption.
+
+```html
+<ul class="orbit-container">
+  <li class="orbit-slide is-active">
+    <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
+    <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
+  </li>
+  <!-- More slides... -->
+</ul>
+```
+
+### Next/Previous Arrows
+
+Orbit controls use the class `.orbit-previous` and `.orbit-next`. The below example has an important accessibility hook: since we're using ASCII arrows for the carousel controls, we add screen reader-only text (wrapped in the class `.show-for-sr`) that explain what the controls do.
+
+```html
+<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> &#9664;&#xFE0E;</button>
+<button class="orbit-next"><span class="show-for-sr">Next Slide</span> &#9654;&#xFE0E;</button>
+```
+
+### Bullets
+
+The bullets serve two purposes: they mark the current slide, and can be clicked on to navigate to another slide. Like with the controls, the bullets also have screen reader-friendly labels.
+
+```html
+<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 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> -->
+
+---
+
+## Slide Contents
+
+A carousel slide can contain images or HTML&mdash;you can even mix between slides in one carousel!
+
+```html
+<li class="orbit-slide">
+  <div>
+    <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 slider does not use animations.</h3>
+  </div>
+</li>
+```
+
+<div class="orbit" role="region" aria-label="Favorite Text Ever" 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>
     <li class="is-active orbit-slide">
-      <div>
-        <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 class="docs-example-orbit-slide">
+        <p><strong>This is dodgerblue.</strong> 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
     </li>
     <li class="orbit-slide">
-      <div>
-        <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 slider does not use animations.</h3>
+      <div class="docs-example-orbit-slide">
+        <p><strong>This is rebeccapurple.</strong> 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
     </li>
     <li class="orbit-slide">
-      <div>
-        <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 slider does not use animations.</h3>
+      <div class="docs-example-orbit-slide">
+        <p><strong>This is darkgoldenrod.</strong> 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
     </li>
     <li class="orbit-slide">
-      <div>
-        <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 slider does not use animations.</h3>
+      <div class="docs-example-orbit-slide">
+        <p><strong>This is lightseagreen.</strong> 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </div>
     </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>
+
+---
+
+## Using Animation
+
+Orbit uses [Motion UI](motion-ui.html) CSS classes to animate slides around. There are four plugin options you can set to change the default effects:
+
+- `data-anim-in-from-left`: transition to play when a slide comes *in from the left*.
+- `data-anim-in-from-right`: transition to play when a slide comes *in from the right*.
+- `data-anim-out-from-left`: transition to play when a slide comes *out from the left*.
+- `data-anim-in-from-right`: transition to play when a slide comes *in from the right*.
+
+Since those option names are pretty *long*, you can also set them all in one HTML attribute, using `data-options`:
+
+```html
+<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;">
+</div>
+```
+
+<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/01.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/02.jpg" alt="Space">
+      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
+    </li>
+    <li class="orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
+      <figcaption class="orbit-caption">Encapsulating</figcaption>
+    </li>
+    <li class="orbit-slide">
+      <img class="orbit-image" src="assets/img/orbit/04.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>
@@ -90,15 +198,19 @@ tags:
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
 </div>
-```
 
-## Changing Default Animations
+---
+
+### Disabling Animation
 
-<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;">
+To disable Motion UI, set the plugin option `useMUI` to `false`. Written as an HTML attribute, that's `data-use-m-u-i="false"`.
+
+```html
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
+</div>
+```
+
+<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>