From 1f7c311e93d82a82b78934ee252984ba9e3b33b3 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Tue, 28 Jan 2014 22:08:42 -0800
Subject: [PATCH] deleting the components page. it's duplication of the docs.

---
 examples/components/classic/index.html  | 530 ------------------------
 examples/components/classic/modals.html |  57 ---
 examples/components/default/index.html  | 530 ------------------------
 examples/components/default/modals.html |  56 ---
 4 files changed, 1173 deletions(-)
 delete mode 100644 examples/components/classic/index.html
 delete mode 100644 examples/components/classic/modals.html
 delete mode 100644 examples/components/default/index.html
 delete mode 100644 examples/components/default/modals.html
diff --git a/examples/components/classic/index.html b/examples/components/classic/index.html
deleted file mode 100644
index d5030eb..0000000
--- a/examples/components/classic/index.html
+++ /dev/null
@@ -1,530 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Testing</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
-    <link rel="stylesheet" href="../../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../../dist/ratchet-theme.css">
-    <script src="../../../dist/ratchet.js"></script>
-    <script src="../../../docs/js/fingerblast.js"></script>
-    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
-
-    <script>
-      $(function() {
-        $(window).on('load', function () { new FingerBlast('.body'); });
-      });
-    </script>
-
-    <style>
-      .content > [class*="bar"] {
-        position: relative;
-      }
-      .slider,
-      .slider li,
-      .slider li img {
-        width: 100%;
-      }
-    </style>
-
-  </head>
-
-<!-- ontouchstart property makes :active/:hover behaviors work on everything -->
-<body class="body" ontouchstart="">
-
-  <!-- POPOVER ============================================================ -->
-  <div id="myPopover" class="popover">
-    <header class="bar-nav">
-      <a class="button" href="#">
-        Open
-      </a>
-      <h3 class="title">Popover title</h3>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-    <ul class="table-view">
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-    </ul>
-  </div>
-
-  <div class="content">
-
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li class="selected">
-          <a href="#item1">Thing one</a>
-        </li>
-        <li>
-          <a href="#item2">Thing two</a>
-        </li>
-      </ul>
-    </header>
-
-    <div>
-      <div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
-      <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
-    </div>
-
-
-    <!-- SLIDER ============================================================ -->
-    <div class="slider">
-      <ul>
-        <li>
-          <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
-        </li>
-        <li>
-          <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
-        </li>
-        <li>
-          <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
-        </li>
-      </ul>
-    </div>
-
-    <!-- TITLEBAR ============================================================ -->
-
-    <!-- Title-bar left and right buttons -->
-    <header class="bar-nav">
-      <a class="button button-prev" href="#">
-        Left
-      </a>
-      <h1 class="title">Title</h1>
-      <a class="button button-next" href="#">
-        Right
-      </a>
-    </header>
-
-    <!-- Title-bar -->
-    <header class="bar-nav">
-      <h1 class="title"><a href="#myPopover">Title</a></h1>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <a class="button open-shelf" href="#">
-        Open fatty
-      </a>
-      <h1 class="title">Title</h1>
-    </header>
-
-    <!-- Title-bar right button -->
-    <header class="bar-nav">
-      <h1 class="title">Title</h1>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <div class="test"></div>
-
-    <!-- Title-bar right button -->
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li class="selected">
-          <a href="#">Thing one</a>
-        </li>
-        <li>
-          <a href="#">Thing two</a>
-        </li>
-        <li>
-          <a href="#">Thing three</a>
-        </li>
-      </ul>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav" id="newshit">
-      <a class="button-primary open-shelf" href="#">
-        Open
-      </a>
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <a class="button open-shelf" href="#">
-        Open
-      </a>
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <!-- BAR-TAB ============================================================ -->
-
-    <!-- Bar-tab 5 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Bar-tab 4 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Bar-tab 3 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-
-    <!-- SEARCH BAR ============================================================ -->
-    <!-- Search bar -->
-    <div class="bar-standard">
-      <form>
-        <input type="search" placeholder="Search">
-      </form>
-    </div>
-
-
-    <!-- CONTROLLER BAR ============================================================ -->
-
-    <!-- Segmented controller as a bar -->
-    <nav class="bar-standard">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Segmented controller as a bar w/ 3 options -->
-    <nav class="bar-standard">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- BUTTON BAR ============================================================ -->
-
-    <!-- Button bar -->
-    <div class="bar-standard">
-      <a class="button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar main -->
-    <div class="bar-standard">
-      <a class="button-primary button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar positive -->
-    <div class="bar-standard">
-      <a class="button-positive button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar negative -->
-    <div class="bar-standard">
-      <a class="button-negative button-block">Block level button</a>
-    </div>
-
-    <!-- BUTTONS ============================================================ -->
-
-    <!-- Standard buttons -->
-    <a class="button">Button</a>
-    <a class="button-primary">Button</a>
-    <a class="button-positive">Button</a>
-    <a class="button-negative">Button</a>
-
-    <!-- Buttons w/ badges -->
-    <a class="button">Button <span class="badge">1</span></a>
-    <a class="button-primary">Button <span class="badge">1</span></a>
-    <a class="button-positive">Button <span class="badge">1</span></a>
-    <a class="button-negative">Button <span class="badge">1</span></a>
-
-    <!-- Buttons at block level -->
-    <a class="button-block">Block level button</a>
-    <a class="button-primary button-block">Block level button</a>
-    <a class="button-positive button-block">Block level button</a>
-    <a class="button-negative button-block">Block level button</a>
-
-    <!-- Buttons at block level w/ badges -->
-    <a class="button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-primary button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-positive button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-negative button-block">Block level button <span class="badge">1</span></a>
-
-    <!-- TOGGLE ============================================================ -->
-    <div class="toggle">
-      <div class="toggle-handle"></div>
-    </div>
-
-    <!-- BADGES ============================================================ -->
-    <span class="badge">1</span>
-    <span class="badge-primary">2</span>
-    <span class="badge-positive">3</span>
-    <span class="badge-negative">4</span>
-    <span class="badge">5</span>
-
-    <!-- LIST ============================================================ -->
-    <ul class="table-view">
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-      <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
-      <li class="table-view-cell table-view-divider">With buttons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-      <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
-      <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
-      <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
-      <li class="table-view-cell table-view-divider">With a toggle</li>
-      <li class="table-view-cell">
-        Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        <a href="#">
-          Item2
-        </a>
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item3
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-    </ul>
-
-    <ul class="table-view inset">
-      <li class="table-view-cell table-view-divider">Normal</li>
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-      <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-divider">With buttons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-      <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
-      <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
-      <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
-      <li class="table-view-cell table-view-divider">With a toggle</li>
-      <li class="table-view-cell">
-        Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item2
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item3
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
-    </ul>
-
-    <!-- List with <a>'s -->
-    <ul class="inset table-view">
-      <li>
-        <a href="#">Item1</a>
-      </li>
-      <li>
-        <a href="#">Item2</a>
-      </li>
-    </ul>
-
-    <!-- SEGMENTED CONTROLLER ============================================================ -->
-
-    <!-- Segmented controller with 2 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li class="selected"><a href="#">Thing two</a></li>
-    </ul>
-
-    <!-- Segmented controller with 3 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-    </ul>
-
-    <!-- Segmented controller with 4 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-      <li><a href="#">Thing four</a></li>
-    </ul>
-
-    <!-- Segmented controller with 5 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-      <li><a href="#">Thing four</a></li>
-      <li><a href="#">Thing five</a></li>
-    </ul>
-
-    <!-- FORMS ============================================================ -->
-
-    <!-- Input -->
-    <form>
-      <input type="text" placeholder="Full name">
-      <input type="search" placeholder="Search">
-      <textarea rows="5"></textarea>
-      <a class="button-positive button-block button-filled">Choose existing</a>
-    </form>
-
-    <!-- Input group -->
-    <form class="input-group">
-      <input type="text" placeholder="Full name">
-      <input type="email" placeholder="Email">
-      <input type="text" placeholder="Username">
-    </form>
-
-    <!-- Input group with labels-->
-    <form class="input-group">
-      <div class="input-row">
-        <label>Full name</label>
-        <input type="text" placeholder="Mister Ratchet">
-      </div>
-      <div class="input-row">
-        <label>Email</label>
-        <input type="email" placeholder="ratchetframework@gmail.com">
-      </div>
-      <div class="input-row">
-        <label>Username</label>
-        <input type="text" placeholder="goRatchet">
-      </div>
-    </form>
-
-  </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/components/classic/modals.html b/examples/components/classic/modals.html
deleted file mode 100644
index 33ba5b6..0000000
--- a/examples/components/classic/modals.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Modal slideup</title>
-
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-
-    <link rel="stylesheet" href="../../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../../dist/theme-classic.css">
-    <script src="../../../dist/ratchet.js"></script>
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Modal slideup</h1>
-  </header>
-  
-  <div class="content content-padded">
-    <a href="#myModal" class="button">Open modal</a>
-  </div>
-
-  <div id="myModal" class="modal">
-    <header class="bar-nav">
-      <h1 class="title">Modal</h1>
-      <a class="button" href="#myModal">
-        Close
-      </a>
-    </header>
-    
-    <div class="content content-padded">
-      <p>Honey, check it out, you got me mesmerized
-      With your black hair and fat-ass thighs
-      Street poetry is my everyday
-      But yo, I gotta stop when you trot my way
-      If I was workin at the club you would not pay
-      Aiyyo, my man phife diggy, he got somthin to say</p>
-
-      <p>I like em brown, yellow, puero rican or hatian
-      Name is phife dawg from the zulu nation
-      Told you in the jam that we can get down
-      Now lets knock the boots like the group h-town
-      You got bbd all on your bedroom wall
-      But Im above the rim and this is how I ball
-      A pretty little somethin on the new york street
-      This is how I represent over this here beat</p>
-      <p>Talkin bout you</p>
-
-      <p>Yo, I took you out</p>
-      <p>But sex was on my mind for the whole damn route
-      My mind was in a frenzy and a horny state
-      But I couldnt drop dimes cause *you couldnt relate*</p>
-    </div>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/components/default/index.html b/examples/components/default/index.html
deleted file mode 100644
index b4e6016..0000000
--- a/examples/components/default/index.html
+++ /dev/null
@@ -1,530 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Testing</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <link rel="stylesheet" href="../../../dist/ratchet.css">
-    <script src="../../../dist/ratchet.js"></script>
-    <script src="../../../docs/js/fingerblast.js"></script>
-    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
-
-    <script>
-      $(function() {
-        $(window).on('load', function () { new FingerBlast('.body'); });
-      });
-    </script>
-
-    <style>
-      
-      .content > [class*="bar"] {
-        position: relative;
-      }
-      .slider,
-      .slider li,
-      .slider li img {
-        width: 100%;
-      }
-    </style>
-
-  </head>
-
-<!-- ontouchstart property makes :active/:hover behaviors work on everything -->
-<body class="body" ontouchstart="">
-
-  <!-- POPOVER ============================================================ -->
-  <div id="myPopover" class="popover">
-    <header class="bar-nav">
-      <a class="button" href="#">
-        Open
-      </a>
-      <h3 class="title">Popover title</h3>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-    <ul class="table-view">
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-    </ul>
-  </div>
-
-  <div class="content">
-
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li class="selected">
-          <a href="#item1">Thing one</a>
-        </li>
-        <li>
-          <a href="#item2">Thing two</a>
-        </li>
-      </ul>
-    </header>
-
-    <div>
-      <div id="item1" class="segmented-controller-item selected"><p>section #1</p></div>
-      <div id="item2" class="segmented-controller-item"><p>section #2</p></div>
-    </div>
-
-
-    <!-- SLIDER ============================================================ -->
-    <div class="slider">
-      <ul>
-        <li>
-          <img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg">
-        </li>
-        <li>
-          <img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg">
-        </li>
-        <li>
-          <img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg">
-        </li>
-      </ul>
-    </div>
-
-    <!-- TITLEBAR ============================================================ -->
-
-    <!-- Title-bar left and right buttons -->
-    <header class="bar-nav">
-      <a class="button button-prev" href="#">
-        Left
-      </a>
-      <h1 class="title">Title</h1>
-      <a class="button button-next" href="#">
-        Right
-      </a>
-    </header>
-
-    <!-- Title-bar -->
-    <header class="bar-nav">
-      <h1 class="title"><a href="#myPopover">Title</a></h1>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <a class="button open-shelf" href="#">
-        Open fatty
-      </a>
-      <h1 class="title">Title</h1>
-    </header>
-
-    <!-- Title-bar right button -->
-    <header class="bar-nav">
-      <h1 class="title">Title</h1>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <div class="test"></div>
-
-    <!-- Title-bar right button -->
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li class="selected">
-          <a href="#">Thing one</a>
-        </li>
-        <li>
-          <a href="#">Thing two</a>
-        </li>
-        <li>
-          <a href="#">Thing three</a>
-        </li>
-      </ul>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav" id="newshit">
-      <a class="button-primary open-shelf" href="#">
-        Open
-      </a>
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <!-- Title-bar left button -->
-    <header class="bar-nav">
-      <a class="button open-shelf" href="#">
-        Open
-      </a>
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-      <a class="button" href="#">
-        Filter
-      </a>
-    </header>
-
-    <!-- BAR-TAB ============================================================ -->
-
-    <!-- Bar-tab 5 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Bar-tab 4 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Bar-tab 3 -->
-    <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-        <li class="tab-item">
-          <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
-          <div class="tab-label">test</div>
-        </li>
-      </ul>
-    </nav>
-
-
-    <!-- SEARCH BAR ============================================================ -->
-    <!-- Search bar -->
-    <div class="bar-standard">
-      <form>
-        <input type="search" placeholder="Search">
-      </form>
-    </div>
-
-
-    <!-- CONTROLLER BAR ============================================================ -->
-
-    <!-- Segmented controller as a bar -->
-    <nav class="bar-standard">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- Segmented controller as a bar w/ 3 options -->
-    <nav class="bar-standard">
-      <ul class="segmented-controller">
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-        <li class="selected">
-          <a href="#">Thing two</a>
-        </li>
-        <li>
-          <a href="#">Thing one</a>
-        </li>
-      </ul>
-    </nav>
-
-    <!-- BUTTON BAR ============================================================ -->
-
-    <!-- Button bar -->
-    <div class="bar-standard">
-      <a class="button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar main -->
-    <div class="bar-standard">
-      <a class="button-primary button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar positive -->
-    <div class="bar-standard">
-      <a class="button-positive button-block">Block level button</a>
-    </div>
-
-    <!-- Button bar negative -->
-    <div class="bar-standard">
-      <a class="button-negative button-block">Block level button</a>
-    </div>
-
-    <!-- BUTTONS ============================================================ -->
-
-    <!-- Standard buttons -->
-    <a class="button">Button</a>
-    <a class="button-primary">Button</a>
-    <a class="button-positive">Button</a>
-    <a class="button-negative">Button</a>
-
-    <!-- Buttons w/ badges -->
-    <a class="button">Button <span class="badge">1</span></a>
-    <a class="button-primary">Button <span class="badge">1</span></a>
-    <a class="button-positive">Button <span class="badge">1</span></a>
-    <a class="button-negative">Button <span class="badge">1</span></a>
-
-    <!-- Buttons at block level -->
-    <a class="button-block">Block level button</a>
-    <a class="button-primary button-block">Block level button</a>
-    <a class="button-positive button-block">Block level button</a>
-    <a class="button-negative button-block">Block level button</a>
-
-    <!-- Buttons at block level w/ badges -->
-    <a class="button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-primary button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-positive button-block">Block level button <span class="badge">1</span></a>
-    <a class="button-negative button-block">Block level button <span class="badge">1</span></a>
-
-    <!-- TOGGLE ============================================================ -->
-    <div class="toggle">
-      <div class="toggle-handle"></div>
-    </div>
-
-    <!-- BADGES ============================================================ -->
-    <span class="badge">1</span>
-    <span class="badge-primary">2</span>
-    <span class="badge-positive">3</span>
-    <span class="badge-negative">4</span>
-    <span class="badge">5</span>
-
-    <!-- LIST ============================================================ -->
-    <ul class="table-view">
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-      <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li>
-      <li class="table-view-cell table-view-divider">With buttons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-      <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
-      <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
-      <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
-      <li class="table-view-cell table-view-divider">With a toggle</li>
-      <li class="table-view-cell">
-        Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        <a href="#">
-          Item2
-        </a>
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item3
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-    </ul>
-
-    <ul class="table-view inset">
-      <li class="table-view-cell table-view-divider">Normal</li>
-      <li class="table-view-cell">Item1</li>
-      <li class="table-view-cell">Item2</li>
-      <li class="table-view-cell">Item3</li>
-      <li class="table-view-cell table-view-divider">With badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="badge">1</span></li>
-      <li class="table-view-cell table-view-divider">With chevrons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span></li>
-      <li class="table-view-cell table-view-divider">With chevrons &amp; badges</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li>
-      <li class="table-view-divider">With buttons</li>
-      <li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li>
-      <li class="table-view-cell">Item2 <a class="button-primary">Button</a></li>
-      <li class="table-view-cell">Item3 <a class="button-positive">Button</a></li>
-      <li class="table-view-cell">Item4 <a class="button-negative">Button</a></li>
-      <li class="table-view-cell table-view-divider">With a toggle</li>
-      <li class="table-view-cell">
-        Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item2
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell">
-        Item3
-        <div class="toggle">
-          <div class="toggle-handle"></div>
-        </div>
-      </li>
-      <li class="table-view-cell table-view-divider">Bottom table-view-divider test</li>
-    </ul>
-
-    <!-- List with <a>'s -->
-    <ul class="inset table-view">
-      <li>
-        <a href="#">Item1</a>
-      </li>
-      <li>
-        <a href="#">Item2</a>
-      </li>
-    </ul>
-
-    <!-- SEGMENTED CONTROLLER ============================================================ -->
-
-    <!-- Segmented controller with 2 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li class="selected"><a href="#">Thing two</a></li>
-    </ul>
-
-    <!-- Segmented controller with 3 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-    </ul>
-
-    <!-- Segmented controller with 4 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-      <li><a href="#">Thing four</a></li>
-    </ul>
-
-    <!-- Segmented controller with 5 tabs -->
-    <ul class="segmented-controller">
-      <li><a href="#">Thing one</a></li>
-      <li><a href="#">Thing two</a></li>
-      <li class="selected"><a href="#">Thing three</a></li>
-      <li><a href="#">Thing four</a></li>
-      <li><a href="#">Thing five</a></li>
-    </ul>
-
-    <!-- FORMS ============================================================ -->
-
-    <!-- Input -->
-    <form>
-      <input type="text" placeholder="Full name">
-      <input type="search" placeholder="Search">
-      <textarea rows="5"></textarea>
-      <a class="button-positive button-block button-filled">Choose existing</a>
-    </form>
-
-    <!-- Input group -->
-    <form class="input-group">
-      <input type="text" placeholder="Full name">
-      <input type="email" placeholder="Email">
-      <input type="text" placeholder="Username">
-    </form>
-
-    <!-- Input group with labels-->
-    <form class="input-group">
-      <div class="input-row">
-        <label>Full name</label>
-        <input type="text" placeholder="Mister Ratchet">
-      </div>
-      <div class="input-row">
-        <label>Email</label>
-        <input type="email" placeholder="ratchetframework@gmail.com">
-      </div>
-      <div class="input-row">
-        <label>Username</label>
-        <input type="text" placeholder="goRatchet">
-      </div>
-    </form>
-
-  </div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/components/default/modals.html b/examples/components/default/modals.html
deleted file mode 100644
index ceaf169..0000000
--- a/examples/components/default/modals.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Modal slideup</title>
-
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-
-    <link rel="stylesheet" href="../../../dist/ratchet.css">
-    <script src="../../../dist/ratchet.js"></script>
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Modal slideup</h1>
-  </header>
-  
-  <div class="content content-padded">
-    <a href="#myModal" class="button">Open modal</a>
-  </div>
-
-  <div id="myModal" class="modal">
-    <header class="bar-nav">
-      <h1 class="title">Modal</h1>
-      <a class="button" href="#myModal">
-        Close
-      </a>
-    </header>
-    
-    <div class="content content-padded">
-      <p>Honey, check it out, you got me mesmerized
-      With your black hair and fat-ass thighs
-      Street poetry is my everyday
-      But yo, I gotta stop when you trot my way
-      If I was workin at the club you would not pay
-      Aiyyo, my man phife diggy, he got somthin to say</p>
-
-      <p>I like em brown, yellow, puero rican or hatian
-      Name is phife dawg from the zulu nation
-      Told you in the jam that we can get down
-      Now lets knock the boots like the group h-town
-      You got bbd all on your bedroom wall
-      But Im above the rim and this is how I ball
-      A pretty little somethin on the new york street
-      This is how I represent over this here beat</p>
-      <p>Talkin bout you</p>
-
-      <p>Yo, I took you out</p>
-      <p>But sex was on my mind for the whole damn route
-      My mind was in a frenzy and a horny state
-      But I couldnt drop dimes cause *you couldnt relate*</p>
-    </div>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
