--- layout: default title: Getting started slug: getting-started lead: "An overview, how to download and use Leapstrap, current roadmap, basic examples, and more." base_url: "../" ---

Touch the web today. Get a Leap Motion Controller, get Leapstrap and put your fingers to work. Leapstrap provides complete HTML5 front-end interactivity for Leap Motion® devices and controllers, aimed specifically at desktop and TV browsers. If you want to use a Leap® with your website, Leapstrap is for you.

You can build your project (i.e. a website or a web application) on fresh on top of Leapstrap or you can integrate Leapstrap into an existing project. If you've already got Bootstrap 3, or if you've already got an existing project to "add" Leapstrap too, see further below.

Use it now

Leapstrap requires just 1 CSS file, 2 plugin files and a JavaScript file - in the below example, Leapstrap detects all anchor (e.g. hyperlinks) and makes them leap-interactive. We don't typically recommend this for performance reasons, but hopefully you'll be able to use your Leap to "touch" all hyperlinks.

Here is some example code with our CDN links, which you may reuse. Please download Leapstrap (by zip or Github) if you intend to make more use of it.

{% highlight html %} {% endhighlight %}

Download it

Download Leapstrap.zip

Download the entire repository zipped. You will be interested in the /dist/ folder (as that contains a ready-to-use version of Leapstrap). See the example template below for what to include

Clone or fork via GitHub

Use git to clone or fork the Leapstrap project.

{% highlight bash %}$ git clone https://github.com/wilkesalex/leapstrap{% endhighlight %}

Build it

The best way to play with Leapstrap is to build your own copy. Checkout the project from github, or extract the entire zip, and navigate to the new leapstrap directory using a terminal. You'll need git, npm and more installed.

{% highlight bash %} $ npm install $ grunt{% endhighlight %}

Visit our Github project

If you work with Leapstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support>, which is Twitter's CSS hinter based on Leapstrap @ Github.

To use Leapstrap with Bootstrap, you just need to replace:

You need to link to the leap.js javascript

{% highlight html %} {% endhighlight %}

You need to add the Leapstrap initialiser

{% highlight html %} {% endhighlight %}

This presumes that you have not modified the core Bootstrap css or javascript files and that you extended bootstrap, rather than modifying it.

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Leapstrap. You'll see something like this:

{% highlight bash %} bootstrap/ ├── css/ │ ├── leapstrap.css │ ├── leapstrap.min.css │ ├── leapstrap-theme.css │ └── leapstrap-theme.min.css ├── js/ │ ├── leapstrap.js │ └── leapstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff {% endhighlight %}

This is the most basic form of Leapstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are included, as is the optional Leapstrap theme.

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Copy the HTML below to begin working with a minimal Leapstrap document.

{% highlight html %} Leapstrap 101 Template

Hello, world!

Click me with Leap! {% endhighlight %}

Build on the basic template above with Bootstrap's many components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.

Starter template

Nothing but the basics: compiled CSS and JavaScript along with a container.

Grids

Multiple examples of grid layouts with all four tiers, nesting, and more.

Jumbotron

Build around the jumbotron with a navbar and some basic grid columns.

Narrow jumbotron

Build a more custom page by narrowing the default container and jumbotron.

Navbar

Super basic template that includes the navbar along with some additional content.

Static top navbar

Super basic template with a static top navbar along with some additional content.

Fixed navbar

Super basic template with a fixed top navbar along with some additional content.

Sign-in page

Custom form layout and design for a simple sign in form.

Sticky footer

Attach a footer to the bottom of the viewport when the content is shorter than it.

Sticky footer with navbar

Attach a footer to the bottom of the viewport with a fixed navbar at the top.

Justified nav

Create a custom navbar with justified links. Heads up! Not too WebKit friendly.

Offcanvas

Build a toggleable off-canvas navigation menu for use with Bootstrap.

Carousel

Customize the navbar and carousel, then add some new components.

Non-responsive Bootstrap

Easily disable the responsiveness of Bootstrap per our docs.

Bootstrap theme

Load the optional Bootstrap theme for a visually enhanced experience.

Leapstrap is built to work best in the latest desktop and TV browsers, meaning older browsers might just not work.

Supported browsers

Specifically, we support the latest versions of the following:

Unofficially, Leapstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Respond.js and cross-domain CSS

Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file://

Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

IE Compatibility modes

Leapstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

{% highlight html %} {% endhighlight %}

This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.

Internet Explorer 10 in Windows 8 and Windows Phone 8

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Leapstrap's CSS. We also need to cater for Windows Phone 8 devices that show a mostly desktop view instead of narrow "phone" view. To address this, include the following CSS and JavaScript to work around the bug.

{% highlight css %} @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } {% endhighlight %} {% highlight js %} if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style") msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) ) document.getElementsByTagName("head")[0].appendChild(msViewportStyle) } {% endhighlight %}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

As a heads up, we include this in the Leapstrap docs as an example.

Safari percent rounding

As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our .col-*-1 grid classes. We can't do much here (see #9282) but you do have some options:

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Leapstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than "workarounds".

We're going to assume that because your users are using Leap, they will have decent sight. But you can still add some helpful features.

If your navigation contains many links and comes before the main content in the DOM, add a Skip to main content link immediately after your opening <body> tag. (read why)

{% highlight html %} Skip to main content {% endhighlight %}

Learn more at HTML CodeSniffer and Penn State's AccessAbility.

Additional resources

Leapstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Leapstrap easier in the future.

Once you've downloaded and included Leapstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.

Removing potential bloat

Not all touch websites need to make use of everything Leapstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused in terms of LESS (CSS) and Javascript. You can do this by utilising the Github project.

We're working on a customizer - if you want to help make that, join the Leapstrap team!

Contact the team

Please see our About Leapstrap page.