examples/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Examples</title>
</head>
<body>
  <h3 id="examples">Examples</h3>
  <p>It's our goal to create a wide variety of example of how Tether
    can be used. Here's what we have so far, please send a PR with
    any examples you might create.</p>
  <h4 id="beginner">Beginner</h4>
  <ul>
    <li><a href="./simple">simple</a>: A simple example to get you started</li>
    <li><a href="./out-of-bounds">out-of-bounds</a>: How to hide the element when it would
      otherwise be offscreen</li>
    <li><a href="./pin">pin</a>: How to pin the element so it never goes offscreen</li>
    <li><a href="./enable-disable">enable-disable</a>: How to enable and disable the Tether
      in JavaScript</li>
  </ul>
  <h4 id="advanced">Advanced</h4>
  <ul>
    <li><a href="./content-visible">content-visible</a>: Demonstrates using the <code>'visible'</code>
      <code>targetModifier</code> to align an element with the visible portion of another.</li>
    <li><a href="./dolls">dolls</a>: A performance test to show several dozen elements,
      each tethered to the previous. Try dragging the top left tether.</li>
    <li><a href="./element-scroll">element-scroll</a>: Demonstrates using the <code>'scroll-handle'</code>
      <code>targetModifier</code> to align an element with the scrollbar of an element.</li>
    <li><a href="./scroll">scroll</a>: Demonstrates using the <code>'scroll-handle'</code>
      <code>targetModifier</code>
      to align an element with the body's scroll handle.</li>
    <li><a href="./viewport">viewport</a>: Demonstrates aligning an element with the
      viewport by using the <code>'visible'</code> <code>targetModifier</code> when tethered to the body.</li>
  </ul>
</body>
</html>