<commit_before>---
layout: full
title: "Ionic: Advanced HTML5 Hybrid Mobile App Framework"
body_css: "home"
---

<div class="primary-row horizontal-gradient">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>
          Create amazing apps
        </h1>
        <h2>
          The beautiful, open source front-end framework<br> for developing hybrid mobile apps with HTML5.
        </h2>
        <p class="btn-row">
          <a class="btn btn-primary btn-download" href="{{ site.latest_download }}" alt="Download v{{ site.latest_version }}">Download alpha</a>
          <a class="btn btn-primary btn-get-started" href="#">Get started</a>
        </p>
        <p class="version-text">
          MIT Licensed &#183; v{{ site.latest_version }} &#183; {{ site.latest_release_date }}
        </p>
      </div>
      <div class="col-md-6 feature-img">
        <img src="/img/homepage/phones-weather-demo.png" alt="Ionic Demo App Preview">
        <p><a href="#">Ionic Weather Demo App</a></p>
      </div>
      <div class="utility-bar">
        <p>hello</p>
      </div>
    </div>
  </div>
</div>

<div class="social-row-gray">&nbsp;</div>

<ul class="social-row">
  <li class="github-watch">
    <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
  </li>
  <li class="github-fork">
    <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
  </li>
  <li class="twitter-share">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="ionicframework" data-hashtags="html5,mobile,angularjs" data-related="maxlynch,adamdbradley,helloimben,drifty">Tweet</a>
  </li>
  <li class="twitter-follow">
    <a href="https://twitter.com/ionicframework" class="twitter-follow-button" data-show-count="true">Follow @ionicframework</a>
  </li>
</ul>

<div class="bg-cover" id="learn-more">

  <div class="desc-row">

    <h3>
      Create hybrid mobile apps with the web technologies you love.
    </h3>
    <p>
      Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS <a href="/docs/components/">components</a>
      for building highly interactive apps. Built with <a href="http://sass-lang.com/" target="_blank">Sass</a>
      and optimized for <a href="http://angularjs.org/" target="_blank">AngularJS</a>.
    </p>

  </div>

  <div class="feature-row img-performance">

    <h4>Performance obsessed</h4>
    <p>
      Speed is important. So important that you only notice when it doesn't work. Ionic is
      built to perform and behave great in the latest mobile devices. With <strong>minimal DOM</strong>
      manipulation, <strong>zero jQuery</strong>, and <strong>hardware accelerated</strong> transitions,
      one thing is for sure: you'll be impressed.
    </p>

  </div>

  <div class="feature-row img-angular img-right">

    <h4>AngularJS &amp; Ionic</h4>
    <p>
      A match made in heaven. Ionic utilizes <a href="http://angularjs.org/">AngularJS</a>
      in order to create a framework most suited to develop rich and robust applications. Ionic not only
      looks nice, but its core architecture is for <strong>serious app development</strong>, 
      and AngularJS ties in perfectly.
    </p>

  </div>

  <div class="feature-row img-native">

    <h4>Native focused</h4>
    <p>
      Ionic is modeled off of popular native mobile development SDKs, making it easy to understand for
      anyone that has built a native app for iOS or Android. Just drop it in your code to get going,
      and push through PhoneGap when it's ready. Develop once, deploy everywhere.
    </p>

  </div>

  <div class="feature-row img-design img-right">

    <h4>Beautifully designed</h4>
    <p>
      Clean, simple, and functional. Ionic has been designed to work and display beautifully on all
      current mobile devices. With tons of popular mobile components, typography, interactive
      paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.
    </p>

  </div>

  <div class="feature-row img-nerds">

      <h4>Built by nerds (like you)</h4>
      <p>
        Built and maintained by developers and designers passionate about web technologies. Ionic focuses
        on standards compliant code, is forward thinking, and managed through 
        <a href="https://github.com/driftyco/ionic">Github</a>. We want to make
        mobile development with HTML5 awesome and simple.
      </p>

  </div>

  <div class="desc-row examples-row">

    <h3>
      Ionic examples
    </h3>
    <p>
      Check out our <a href="/examples/">examples</a>, including starter templates and showcase demos.
    </p>

    <div>
      <img src="/img/examples.jpg" style="max-width: 100%" alt="Ionic examples">
    </div>

  </div>

</div>

<div class="pre-footer footer-social">

  <p>
    Help us change the way the world develops for mobile.
    <span class="spread-word">Spread the word.</span>
  </p>
  <ul class="share-row">
    <li class="github-watch">
      <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
    </li>
    <li class="gplus">
      <div class="g-plusone" data-size="medium"></div>
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/platform.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </li>
    <li class="twitter-share">
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="ionicframework" data-hashtags="html5,mobile,angularjs" data-related="maxlynch,adamdbradley,helloimben,drifty">Tweet</a>
    </li>
    <li class="twitter-follow">
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-share-button" data-href="http://ionicframework.com/" data-type="button_count"></div>
    </li>
    <li class="linkedin-share">
      <script src="//platform.linkedin.com/in.js" type="text/javascript">
       lang: en_US
      </script>
      <script type="IN/Share" data-counter="right"></script>
    </li>
  </ul>

</div>
<commit_msg>moved to right container<commit_after>---
layout: full
title: "Ionic: Advanced HTML5 Hybrid Mobile App Framework"
body_css: "home"
---

<div class="primary-row horizontal-gradient">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>
          Create amazing apps
        </h1>
        <h2>
          The beautiful, open source front-end framework<br> for developing hybrid mobile apps with HTML5.
        </h2>
        <p class="btn-row">
          <a class="btn btn-primary btn-download" href="{{ site.latest_download }}" alt="Download v{{ site.latest_version }}">Download alpha</a>
          <a class="btn btn-primary btn-get-started" href="#">Get started</a>
        </p>
        <p class="version-text">
          MIT Licensed &#183; v{{ site.latest_version }} &#183; {{ site.latest_release_date }}
        </p>
      </div>
      <div class="col-md-6 feature-img">
        <img src="/img/homepage/phones-weather-demo.png" alt="Ionic Demo App Preview">
        <p><a href="#">Ionic Weather Demo App</a></p>
      </div>
    </div>
    <div class="utility-bar">
        <p>hello</p>
    </div>
  </div>
</div>

<div class="social-row-gray">&nbsp;</div>

<ul class="social-row">
  <li class="github-watch">
    <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
  </li>
  <li class="github-fork">
    <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
  </li>
  <li class="twitter-share">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="ionicframework" data-hashtags="html5,mobile,angularjs" data-related="maxlynch,adamdbradley,helloimben,drifty">Tweet</a>
  </li>
  <li class="twitter-follow">
    <a href="https://twitter.com/ionicframework" class="twitter-follow-button" data-show-count="true">Follow @ionicframework</a>
  </li>
</ul>

<div class="bg-cover" id="learn-more">

  <div class="desc-row">

    <h3>
      Create hybrid mobile apps with the web technologies you love.
    </h3>
    <p>
      Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS <a href="/docs/components/">components</a>
      for building highly interactive apps. Built with <a href="http://sass-lang.com/" target="_blank">Sass</a>
      and optimized for <a href="http://angularjs.org/" target="_blank">AngularJS</a>.
    </p>

  </div>

  <div class="feature-row img-performance">

    <h4>Performance obsessed</h4>
    <p>
      Speed is important. So important that you only notice when it doesn't work. Ionic is
      built to perform and behave great in the latest mobile devices. With <strong>minimal DOM</strong>
      manipulation, <strong>zero jQuery</strong>, and <strong>hardware accelerated</strong> transitions,
      one thing is for sure: you'll be impressed.
    </p>

  </div>

  <div class="feature-row img-angular img-right">

    <h4>AngularJS &amp; Ionic</h4>
    <p>
      A match made in heaven. Ionic utilizes <a href="http://angularjs.org/">AngularJS</a>
      in order to create a framework most suited to develop rich and robust applications. Ionic not only
      looks nice, but its core architecture is for <strong>serious app development</strong>, 
      and AngularJS ties in perfectly.
    </p>

  </div>

  <div class="feature-row img-native">

    <h4>Native focused</h4>
    <p>
      Ionic is modeled off of popular native mobile development SDKs, making it easy to understand for
      anyone that has built a native app for iOS or Android. Just drop it in your code to get going,
      and push through PhoneGap when it's ready. Develop once, deploy everywhere.
    </p>

  </div>

  <div class="feature-row img-design img-right">

    <h4>Beautifully designed</h4>
    <p>
      Clean, simple, and functional. Ionic has been designed to work and display beautifully on all
      current mobile devices. With tons of popular mobile components, typography, interactive
      paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.
    </p>

  </div>

  <div class="feature-row img-nerds">

      <h4>Built by nerds (like you)</h4>
      <p>
        Built and maintained by developers and designers passionate about web technologies. Ionic focuses
        on standards compliant code, is forward thinking, and managed through 
        <a href="https://github.com/driftyco/ionic">Github</a>. We want to make
        mobile development with HTML5 awesome and simple.
      </p>

  </div>

  <div class="desc-row examples-row">

    <h3>
      Ionic examples
    </h3>
    <p>
      Check out our <a href="/examples/">examples</a>, including starter templates and showcase demos.
    </p>

    <div>
      <img src="/img/examples.jpg" style="max-width: 100%" alt="Ionic examples">
    </div>

  </div>

</div>

<div class="pre-footer footer-social">

  <p>
    Help us change the way the world develops for mobile.
    <span class="spread-word">Spread the word.</span>
  </p>
  <ul class="share-row">
    <li class="github-watch">
      <iframe src="http://ghbtns.com/github-btn.html?user=driftyco&amp;repo=ionic&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="180" height="25"></iframe>
    </li>
    <li class="gplus">
      <div class="g-plusone" data-size="medium"></div>
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/platform.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </li>
    <li class="twitter-share">
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="ionicframework" data-hashtags="html5,mobile,angularjs" data-related="maxlynch,adamdbradley,helloimben,drifty">Tweet</a>
    </li>
    <li class="twitter-follow">
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <div class="fb-share-button" data-href="http://ionicframework.com/" data-type="button_count"></div>
    </li>
    <li class="linkedin-share">
      <script src="//platform.linkedin.com/in.js" type="text/javascript">
       lang: en_US
      </script>
      <script type="IN/Share" data-counter="right"></script>
    </li>
  </ul>

</div>

{'fraction_non_alphanumeric': 0.15645126275417903, 'fraction_numerical': 0.00839423981474781, 'mean_word_length': 3.1904184354154035, 'pattern_counts': {'":': 0, '<': 313, '<?xml version=': 0, '>': 313, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1584366', 'n_tokens_mistral': 4557, 'n_tokens_neox': 4370, 'n_words': 1169}