---
layout: default
title: About
slug: about
lead: "Learn about the history of Leapstrap, meet the core team<br/>and find out more about our community."
base_url: "../"
---


<!-- History
================================================== -->
<div class="bs-docs-section">
  <div class="page-header">
    <h1 id="history">History</h1>
  </div>
  <p class="lead">Leapstrap brings the power of touch to your website in an extensive yet easy to use HTML5 framework, eliminating the need for installing Leap apps (through Airspace) to control a web site.</p><p> You can use it as a quick way to utilize Leap Motion controllers on any web page - for personal, business or experimental use. Leapstrap 1.0 was released in October 2013 by Alex Wilkes.</p>
  
</div>


<!-- Videos
================================================== -->
<div class="bs-docs-section">
  <div class="page-header">
    <h1 id="history">Videos</h1>
  </div>
  <p class="lead">These videos might give you a better idea of what Leapstrap is about.</p>
  <div class="row">
<div class="col-md-6">
<h5>Leapstrap Overview</h5>
<iframe width="480" height="360" src="//www.youtube.com/embed/JYvu3IGWi8Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-6">
<h5>Leapstrap In-depth</h5>
<iframe width="480" height="360" src="//www.youtube.com/embed/GWL1F_f6OAY" frameborder="0" allowfullscreen></iframe>
</div>
</div>

  
</div>

 <!-- Roadmap
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="roadmap">Roadmap</h1>
    </div>
 
<h3 id="migration-new">Current Features</h3>

<div class="row">
<div class="col-md-4">
<h5>Leap-ready Interaction</h5>
<ul class="list-unstyled">
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Leap Click/Tap</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Delay</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Multitap</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Attractors</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Hand Gestures</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Meta Gestures</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}leap">Scrolling</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Leap-ready Page Components</h5>
<ul class="list-unstyled">
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Modals</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Dropdowns</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Scrollspy</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Tabs</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Tooltips</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Alerts / Popups</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Buttons</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}javascript">Collapse / Accordions</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">Thumbnails</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">Media Objects</a></li></ul>
</div>
<div class="col-md-4">
<h5>Leap-ready Page Elements</h5>
<ul class="list-unstyled">
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Dropdowns</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Buttons</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">Navigation</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">List Groups</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">Breadcrumbs</a></li>

<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}more">Icons</a></li>

<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Alerts / Popups</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Panels</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Wells</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Labels</a></li>
<li><span class="glyphicon glyphicon-ok"></span> <a href="{{ page.base_url }}basics">Badges</a></li>
</ul>
</div>

</div>


<h3 id="migration-new">Work List</h3>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Item</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Content / Image Carousel</td>
            <td>Need to improve the image carousel so that it does not follow the hyperlink</td>
          </tr>
     
       
        </tbody>
      </table>
    </div><!-- /.table-responsive -->

 

    <h3 id="">Intended Audience</h3>
    <p>Leapstrap is currently intended for use by developers who have some experience in Bootstrap. </p>
    
 
  </div>


<!-- Team
================================================== -->
<div class="bs-docs-section">
  <div class="page-header">
    <h1 id="team">Core team</h1>
  </div>
  <p class="lead">Leapstrap is maintained by Alex Wilkes, built upon a community of projects, designers and developers.</p>
  <div class="list-group bs-team">
    <div class="list-group-item">
    <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=wilkesalex&amp;type=follow"
  allowtransparency="true" frameborder="0" scrolling="0" width="160" height="20"></iframe>
      <a class="team-member" href="https://github.com/wilkesalex">
        <img src="http://www.gravatar.com/avatar/32a9c6c3ec336af4c699dba0ed13042d.png" alt="Alex Wilkes">
        <strong>Alex Wilkes</strong> <small>@deskofwilkes</small>
      </a>
    </div>
    <div class="list-group-item">
     
      <a class="team-member" href="#">
        <img src="http://www.gravatar.com/avatar/00000000000000000000000000000000" alt="You">
        <strong>I need help</strong>
      </a>
    </div>
  
  </div>
 
</div>


<!-- Community
================================================== -->
<div class="bs-docs-section">
  <div class="page-header">
    <h1 id="community">Community</h1>
  </div>
  <p>Get involved with Leapstrap development by <a href="https://github.com/wilkesalex/leapstrap/issues/new">opening an issue</a> or submitting a pull request.</p>
  <ul>
    
    <li>Join us <a href="https://twitter.com/leapstrap">@leapstrap on Twitter</a></li>
 
  </ul>
 
</div>


 
  
  <!-- License
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="license">License</h1>
    </div>
    <p class="lead">TBC</p>


  </div>