index.html

---
layout: v2_fluid/default
title: "Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular"
body_css: "home"
header_style: transparent
id: home
centered: true
has_container: true
pre_footer: true
---

<div id="slider" class="primary-row">
  <div class="slide slide-home">
    <div class="container">
      <div class="col-sm-6 fadeIn">
        <h1>
          The top open source framework for building amazing mobile apps.
        </h1>
        <h3>
          Ionic is the beautiful, free and open source mobile SDK for developing
          native and progressive web apps with ease.
        </h3>
        <p class="btn-row">
          <a id="repo-download"
             class="btn white btn-download desktop-btn"
             href="/getting-started/">Get started</a>
          <a class="btn btn-primary btn-get-started hide-sm"
             href="/docs/v2/"
             alt="Docs for v{{ site.latest_version }}">Explore the docs</a>
          <a class="btn btn-primary btn-download show-sm" href="/docs/v2/">
            View docs</a>
        </p>
        <p class="version-text">
          v2.0.0 rc.3 / 2016-11-17 / MIT Licensed
        </p>
      </div>
      <div class="col-sm-6 feature-img one">
        <img class="device pixel two" src="/img/home/cta-pixel.png">
        <img class="device iphone one" src="/img/home/cta-iphone.png">
        <a href="http://view.ionic.io/" target="_blank">
          <img class="app-icon three" src="/img/homepage/ionicview-icon_2x.png">
          <span class="demo-link">Ionic View App</span>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="utility-bar">
  <div class="container">
    <form action="http://codiqa.createsend.com/t/t/s/jytylh/"
          method="post"
          class="input-group col-md-5">
      <input name="cm-jytylh-jytylh"
        class="form-control"
        type="email"
        placeholder="Get the latest ionic framework news and updates"
        required />
      <span class="input-group-btn">
        <button class="btn white sm" type="submit">Email me!</button>
      </span>
    </form>
    <ul class="social-row ionic col-md-7">
      <li>
        <a href="https://github.com/driftyco/ionic" target="_blank">
          <i class="ion-logo-github"></i> <span id="gh-stargazers"></span>
          stars
        </a>
      </li>
      <li>
        <a href="https://github.com/driftyco/ionic" target="_blank">
          <i class="ion-md-git-branch"></i> <span id="gh-forks"></span> forks</a>
      </li>
      <li>
        <a href="https://twitter.com/IonicFramework" target="_blank">
          <i class="ion-logo-twitter"></i>
          <span id="tw-followers">Twitter</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<section class="built-with">
  <hgroup class="container">
    <h2>Build apps with web tech you know and love</h2>
    <h4>
      Know how to build websites? Then you already know how to build mobile
      apps. Ionic Framework offers the best web and native app components for
      building highly interactive native and progressive web apps with Angular.
    </h4>
    <ul class="techs">
      <li class="angular"></li>
      <li class="js"></li>
      <li class="ts"></li>
      <li class="html"></li>
    </ul>
  </hgroup>
  <ul class="features container">
    <li>
      <h3>Free &amp; Open Source</h3>
      <p>
        Ionic Framework is a 100% free and open source project, licensed under
        MIT. It will always remain free to use, powered by a massive world-wide
        community.
      </p>
    </li>
    <li>
      <h3>Fully Cross-Platform</h3>
      <p>
        Build progressive web and native mobile apps for every major app store,
        with one codebase. Ionic works and looks beautiful wherever it runs.
      </p>
    </li>
    <li>
      <h3>Premier Native Plugins</h3>
      <p>
        Use over 70 native device features like Bluetooth, HealthKit, Finger
        Print Auth, and more with Cordova/PhoneGap plugins  and TypeScript
        extensions.
      </p>
    </li>
    <li>
      <h3>First-class Documentation</h3>
      <p>
        Built with real app examples, component demos, guides, and how-to’s to
        get you up and running with mobile apps faster than ever before.
      </p>
    </li>
  </ul>
</section>

<section class="about-code container">
  <aside class="code-box">
    <header>
      <h3>write once. deploy anywhere.</h3>
      <ul class="platforms">
        <li class="ios"></li>
        <li class="android"></li>
        <li class="windows"></li>
        <li class="chrome"></li>
        <li class="electron"></li>
      </ul>
    </header>
    <div class="draggable stage">
      <div class="code">
<pre><code class="lang-html">
<span class="line">&lt;ion-list&gt;</span>
<span class="line"></span>
<span class="line">  &lt;ion-item&gt;</span>
<span class="line">    &lt;ion-icon name="leaf" item-left&gt;&lt;/ion-icon&gt;</span>
<span class="line">    Astronomy</span>
<span class="line">  &lt;/ion-item&gt;</span>
<span class="line"></span>
<span class="line">  &lt;ion-item&gt;</span>
<span class="line">    &lt;ion-icon name="leaf" item-left&gt;&lt;/ion-icon&gt;</span>
<span class="line">    Muggle Studies</span>
<span class="line">  &lt;/ion-item&gt;</span>
<span class="line"></span>
<span class="line">&lt;/ion-list&gt;</span>
</code></pre>
      </div>
      <div class="app"></div>
      <div class="toggle"></div>
    </div>
  </aside>
  <hgroup>
    <h2>
      One code base.<br>
      Running everywhere.
    </h2>
    <h4>
      Ionic is the only mobile app stack that enables web developers apps for
      all major app stores and the mobile web with a single code base. And with
      Ionic’s <strong>Platform Continuity</strong>, your app looks and feels
      at home on every device.
    </h4>
  </hgroup>
  <ul class="features">
    <li>
      <h3>Performance obsessed</h3>
      <p>
        Speed is so important, you only notice when it isn't there. Ionic is
        built to perform and behave great on the latest mobile devices with best
        practices like efficient hardware accelerated transitions, and
        touch-optimized gestures. Trust us, you'll be impressed.
      </p>
      <a href="/docs/v2/api" title="V2 API Docs">
        Check out our full API
        <span class="ion-ios-arrow-forward-outline"></span>
      </a>
    </li>
    <li class="beautiful">
      <h3>Beautifully designed</h3>
      <p>
        Clean, simple, and functional. Ionic is designed to work and display
        beautifully on all current mobile devices and platforms. With ready-made
        components, typography, and a gorgeous (yet extensible) base theme that
        adapts to each platform, you'll be building in style.
      </p>
      <a href="/docs/v2/components/" title="Component Docs">
        Explore our Component docs
        <span class="ion-ios-arrow-forward-outline"></span>
      </a>
    </li>
    <li class="optimized">
      <h3>Native <i>and</i> web optimized</h3>
      <p>
        Ionic emulates native app UI guidelines and uses native SDKs, bringing
        the UI standards and device features of native apps together with the
        full power and flexibility of the open web. Ionic uses Cordova or
        Phonegap to deploy natively, or runs in the browser as a Progressive Web
        App.
      </p>
      <a href="https://blog.ionic.io/what-is-a-progressive-web-app/">
        Learn about Progressive Web Apps
        <span class="ion-ios-arrow-forward-outline"></span>
      </a>
    </li>
  </ul>
</section>

<section class="about-toolkit">
  <div class="container">
    <hgroup>
      <h2>A complete mobile toolkit, built for web developers.</h2>
      <h4>
        Everything you need to start creating fully functional mobile apps in
        just minutes.
      </h4>
    </hgroup>
    <ul class="features">
      <li class="cli">
        <a href="/docs/v2/cli/">A Simple CLI</a> to create, build, test, and
        deploy your Ionic apps onto any platform. It’s like magic, but not.
      </li>
      <li class="native">
        <a href="/docs/v2/native/">Ionic Native</a> unlocks native APIs and
        features by wrapping Cordova plugins in TypeScript goodness.
      </li>
      <li class="reload">
        <a href="https://blog.ionic.io/live-reload-all-things-ionic-cli/">Live
        Reload</a> because to compile and redeploy your app at every step of
        development is for chumps.
      </li>
      <li class="zionicons">
        <a href="/docs/v2/ionicons/">Ionicons</a> icon pack includes hundreds of
        the most common app icons. MIT licensed, and ready out of the box.
      </li>
      <li class="deeplinking">
        <a href="https://blog.ionic.io/deeplinking-in-ionic-apps/">Deeplinking
        </a> allows you to start your app from a web link to load a specific
        view right from the start.
      </li>
      <li class="aot">
        <a href="http://blog.ionic.io/ionic-build-process-updates/">AoT
        Compiling</a> means your app loads lightning fast. Don’t blink on that
        loading screen, you’ll miss it.
      </li>
    </ul>
  </div>
</section>

<section class="about-community">
  <div class="container">
    <aside class="stats">
      <h5>At a glance</h5>
      <h1>3.1 M</h1>
      <h4>IONIC APPS BUILT</h4>
      <ul>
        <li class="devs">5 Million developers</li>
        <li class="meetups">100+ Meetup Groups</li>
        <li class="github">26,000+ Github stars</li>
        <li class="so">30,000 S.O. questions</li>
      </ul>
    </aside>
    <hgroup>
      <h2>Build alongside the best community around.</h2>
      <h4>
        There are millions of Ionic developers in over 200 countries worldwide.
        <a href="">Join us.</a>
      </h4>
    </hgroup>
    <ul class="features">
      <li class="slack">
        <a href="http://ionicworldwide.herokuapp.com/">World Wide Slack</a> is always filled with tons of ionic devs.
      </li>
      <li class="forum">
        <a href="http://forum.ionicframework.com/">Community Forum</a> is great for sharing and getting help.
      </li>
      <li class="so">
        <a href="http://stackoverflow.com/search?q=ionic">StackOverflow</a> is filled with help to common questions.
      </li>
      <li class="github">
        <a href="https://github.com/driftyco/ionic">GitHub</a> is the best place to file issues and contribute.
      </li>
    </ul>
  </div>
</section>

<section class="loved-by container" id="testimonials">
  <h2>
    <strong>Loved</strong> by some of the best people and companies on earth
  </h2>
  <h3 class="quote catlin active">
    Ionic is the framework that I use for all of my projects, and I'm not sure I
    can give a bigger compliment than that. The innate sense of style and
    sophistication built into Ionic is awesome and makes building
    professional-level mobile applications a snap.
  </h3>
  <h3 class="quote tamplin">
    Ionic will dramatically change the way mobile apps are built. Their choice
    of AngularJS means building functionality is now a breeze and it feels
    near-native. Your developers and your users will thank you.
  </h3>
  <h3 class="quote schinsky">
    I was so inspired when I found Ionic. It fills a gap that’s missing when
    building for mobile and solves many complexities that otherwise require
    multiple libraries, keeping your code cleaner. Overall, it just makes mobile
    development fun and fast, so you can build more!
  </h3>
  <h3 class="quote hevery">
    Ionic is a shining example of a high-quality framework that takes advantage
    of Angular's power and flexibility, enabling developers to build
    production-ready mobile apps and Progressive Web Apps, in a fraction of the
    time.
  </h3>
  <ul class="quotees">
    <li data-speaker="catlin" class="active">
      <img src="/img/home/testimonial-hampton.png" alt="Hampton Catlin" />
      <strong>Hampton Catlin</strong>
      <span>Creator of <a href="http://sassdoc.com">Sass</a></span>
    </li>
    <li data-speaker="tamplin">
      <img src="/img/home/testimonial-james.png" alt="James Tamplin" />
      <strong>James Tamplin</strong>
      <span>Co-Founder &amp; CEO, <a href="https://firebase.google.com">Firebase
      </a></span>
    </li>
    <li data-speaker="schinsky">
      <img src="/img/home/testimonial-holly.png" alt="Holly Schinsky" />
      <strong>Holly Schinsky</strong>
      <span>Dev Advocate, <a href="http://www.adobe.com">Adobe</a></span>
    </li>
    <li data-speaker="hevery">
      <img src="/img/home/testimonial-misko.png" alt="Misko Hevery" />
      <strong>Misko Hevery</strong>
      <span>Creator of <a href="https://angular.io">Angular</a></span>
    </li>
  </ul>
  <img class="companies" src="/img/home/testimonial-logos.png"/>
</section>

<!--
<script type="text/javascript" src="/js/slick.js"></script> -->
<script>

window.onload = function() {

// Grab fresh social data from GH and Twitter
function digits(n){
  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

$.ajax({
  dataType: "jsonp",
  url: "https://api.github.com/repos/driftyco/ionic",
  success: function(data){
    if(data) {
      if(data.data.watchers){
        $("#gh-stargazers").html(digits(data.data.watchers));
      }
      if(data.data.forks){
        $("#gh-forks").html(digits(data.data.forks));
      }
    }
  }
});

$.ajax({
  dataType: "jsonp",
  url: "https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=ionicframework",
  success: function(data){
    if(data && data.length && data[0].formatted_followers_count){
      $("#tw-followers").html(digits(data[0].formatted_followers_count));
      console.log(digits(data[0].formatted_followers_count))
    }
  }
});

var $appEl = $('.draggable .app');
var draggableWidth = $('.draggable').width();
$('.draggable .toggle').draggable({
  axis: 'x',
  containment: 'parent',
  drag: function(ev, ui) {
    $appEl.css('right', draggableWidth - ui.position.left + 'px');
  }
});

// Testimonials rotation
var $testimonials = $('#testimonials');
var testimonialIntervalID = null;
var queued = false;

function nextQuote() {
  $active = $testimonials.find('.quotees .active');

  if ($active.is(':last-child')) {
    $active.removeClass('active');
    $active = $testimonials.find('.quotees li:first-child').addClass('active');
  } else {
    $active = $active.removeClass('active').next().addClass('active');
  }

  $testimonials.find('h3.active')
               .removeClass('active')
               .siblings('.' + $active.data('speaker'))
               .addClass('active');
}

function startTestimonialRotation() {
  queued = false;
  testimonialIntervalID = setInterval(nextQuote, 8000);
}

// what happens if a speaker is clicked
$('.quotees li').click(function(ev) {
  $testimonials.find('.active').removeClass('active');
  $target = $(ev.delegateTarget);
  $target.addClass('active');
  $testimonials.find('.' + $target.data('speaker')).addClass('active');
  // stop the rotation for a bit
  clearInterval(testimonialIntervalID);
  if (! queued) {
    queued = true;
    setTimeout(startTestimonialRotation, 13000);
  }
})

// kick things off
startTestimonialRotation();

// $('#slider').slick({
//   dots: true,
//   infinite: true,
//   speed: 300,
//   slidesToShow: 1,
//   adaptiveHeight: false,
//   fade: true,
//   cssEase: 'ease-in-out',
//   draggable: false,
//   autoplay: true,
//   autoplaySpeed: 80000,
//   focusOnSelect: false,
//   // https://github.com/kenwheeler/slick/issues/1537
//   accessibility: false
// }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
//   $slide = $("#slider .slick-current");
//   $slide.addClass('slick-fade-out');
//   setTimeout(function(){
//     $slide.removeClass('slick-fade-out')
//   }, 300) // match speed in slick config object above
// })
 }
</script>