<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS.">
<meta name="keywords" content="html5,javascript,mobile,drifty,ionic,hybrid,phonegap,cordova,native,ios,android,angularjs">
<meta name="author" content="Drifty">
<meta property="og:image" content="http://ionicframework.com/img/ionic-logo-blog.png"/>

    <title>Platform Customization - Ionic Framework</title>
    <link href="/css/site.css?17" rel="stylesheet">
<!--<script src="//cdn.optimizely.com/js/595530035.js"></script>-->
<script type="text/javascript">var _sf_startpt=(new Date()).getTime()</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44023830-1', 'ionicframework.com');
  ga('send', 'pageview');

</script>


<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  </head>

  <body class="docs docs-page docs-guide">

    <nav class="navbar navbar-default horizontal-gradient" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle button ionic" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <i class="icon ion-navicon"></i>
      </button>
      <a class="navbar-brand" href="/">
        
          <img src="/img/ionic-logo-white.svg" width="123" height="43" alt="Ionic Framework">
        
      </a>
      <a href="http://blog.ionic.io/announcing-ionic-1-0/" target="_blank">
      <img src="/img/ionic1-tag.png" alt="Ionic 1.0 is out!" width="28" height="32" style="margin-left: 140px; margin-top:22px; display:block">
      </a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="getting-started-nav nav-link" href="/getting-started/">Getting Started</a></li>
        <li><a class="docs-nav nav-link" href="/docs/">Docs</a></li>
        <li><a class="nav-link" href="http://ionic.io/support">Support</a></li>
        <li><a class="blog-nav nav-link" href="http://blog.ionic.io/">Blog <span id="blog-badge">1</span></a></li>
        <li><a class="nav-link" href="http://forum.ionicframework.com/">Forum</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle nav-link " data-toggle="dropdown" role="button" aria-expanded="false">More <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <div class="arrow-up"></div>
            <li><a class="products-nav nav-link" href="http://ionic.io/">Ionic Platform</a></li>
            <li><a class="examples-nav nav-link" href="http://showcase.ionicframework.com/">Showcase</a></li>
            <li><a class="nav-link" href="http://jobs.ionic.io/">Job Board</a></li>
            <li><a class="nav-link" href="http://market.ionic.io/">Market</a></li>
            <li><a class="nav-link" href="http://ionicworldwide.herokuapp.com/">Ionic Worldwide</a></li>
            <li><a class="nav-link" href="http://play.ionic.io/">Playground</a></li>
            <li><a class="nav-link" href="http://creator.ionic.io/">Creator</a></li>
            <li><a class="nav-link" href="http://shop.ionic.io/">Shop</a></li>
            <!--<li><a class="nav-link" href="http://ngcordova.com/">ngCordova</a></li>-->
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>


    <div class="header horizontal-gradient">
  <div class="container">
    <h3>Platform Customization</h3>
    <h4>An overview of customizing your Ionic app based on the platform</h4>
  </div>
  <div class="news">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 news-col">
          Check out our <a href="/docs/guide/">Guide</a>, which covers all the basics of setting up.
        </div>
        <div class="col-sm-4 search-col">
          <div class="search-bar">
  <span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span>
  <input type="search" id="search-input" value="Search">
</div>

        </div>
      </div>
    </div>
  </div>
</div>

<div id="search-results" class="search-results" style="display:none">
  <div class="container">
    <div class="search-section search-api">
      <h4>JavaScript</h4>
      <ul id="results-api"></ul>
    </div>
    <div class="search-section search-css">
      <h4>CSS</h4>
      <ul id="results-css"></ul>
    </div>
    <div class="search-section search-content">
      <h4>Resources</h4>
      <ul id="results-content"></ul>
    </div>
  </div>
</div>



    <div class="container content-container">

      <div class="row">

        <div class="col-md-2 col-sm-3 aside-menu">

          <div class="docked-menu">

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/overview/">Overview</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/components/">CSS</a>
              </li>
            </ul>

            <!-- Docs: Platform Customization -->
            <ul class="nav left-menu active-menu">
              <li class="menu-title">
                <a href="/docs/platform-customization/">Platform Customization</a>
              </li>
              <li><a href="/docs/platform-customization/platform-classes.html">Platform Classes</a></li>
              <li><a href="/docs/platform-customization/styling-angularjs.html">Styling Using AngularJS</a></li>
              <li><a href="/docs/platform-customization/dynamic-templates.html">Dynamic Templates</a></li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/api/">JavaScript</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/cli/">CLI</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="http://learn.ionicframework.com/">Learn Ionic</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/guide/">Guide</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/ionic-cli-faq/">FAQ</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/getting-help/">Getting Help</a>
              </li>
            </ul>

            <ul class="nav left-menu">
              <li class="menu-title">
                <a href="/docs/concepts/">Ionic Concepts</a>
              </li>
            </ul>
          </div>

        </div>

        <div class="col-md-10 col-sm-9 main-content">
          <!-- Platform Customization
  ================================================== -->

<section class="docs-section active" id="platform-customization">

  <h1 class="title"><a href="#platform-customization">Platform Customization</a></h1>

  <p>Ionic already includes some platform-based customization, but sometimes you need your project to be even more customized. There are a few different ways you can use the platform to style an app. Learn how to implement platform classes, use JS to style your app, or use dynamic templates in the documentation below.</p>

  <ul>
    <li><a href="/docs/platform-customization/platform-classes.html">Platform Classes</a></li>
    <li><a href="/docs/platform-customization/styling-angularjs.html">Styling Using AngularJS</a></li>
    <li><a href="/docs/platform-customization/dynamic-templates.html">Dynamic Templates</a></li>
  </ul>
</section>

        </div>

      </div>

    </div>

    <div class="pre-footer">

      <div class="row ionic">

        <div class="col-sm-6 col-a">
          <h4>
            <a href="/getting-started/">Getting started <span class="icon ion-arrow-right-c"></span></a>
          </h4>
          <p>
            Learn more about how Ionic was built, why you should use it, and what's included. We'll cover
            the basics and help you get started from the ground up.
          </p>
        </div>

        <div class="col-sm-6 col-b">
          <h4>
            <a href="/docs/">Documentation <span class="icon ion-arrow-right-c"></span></a>
          </h4>
          <p>
            What are you waiting for? Take a look and get coding! Our documentation covers all you need to know
            to get an app up and running in minutes.
          </p>
        </div>

      </div>

    </div>

    <footer class="footer">

  <nav class="base-links">

    <dl>
      <dt>Docs</dt>
      <dd><a href="http://ionicframework.com/docs/">Documentation</a></dd>
      <dd><a href="http://ionicframework.com/getting-started/">Getting Started</a></dd>
      <dd><a href="http://ionicframework.com/docs/overview/">Overview</a></dd>
      <dd><a href="http://ionicframework.com/docs/components/">Components</a></dd>
      <dd><a href="http://ionicframework.com/docs/api/">JavaScript</a></dd>
      <dd><a href="http://ionicframework.com/submit-issue/">Submit Issue</a></dd>
    </dl>

    <dl>
      <dt>Resources</dt>
      <dd><a href="http://learn.ionicframework.com/">Learn Ionic</a></dd>
      <dd><a href="http://ngcordova.com/">ngCordova</a></dd>
      <dd><a href="http://ionicons.com/">Ionicons</a></dd>
      <dd><a href="http://creator.ionic.io/">Creator</a></dd>
      <dd><a href="http://showcase.ionicframework.com/">Showcase</a></dd>
      <dd><a href="http://manning.com/wilken/?a_aid=ionicinactionben&a_bid=1f0a0e1d">The Ionic Book</a></dd>
    </dl>

    <dl>
      <dt>Contribute</dt>
      <dd><a href="http://forum.ionicframework.com/">Community Forum</a></dd>
      <dd><a href="http://webchat.freenode.net/?randomnick=1&amp;channels=%23ionic&amp;uio=d4">Ionic IRC</a></dd>
      <dd><a href="http://ionicframework.com/present-ionic/">Present Ionic</a></dd>
      <dd><a href="http://ionicframework.com/contribute/">Contribute</a></dd>
      <dd><a href="https://github.com/driftyco/ionic-learn/issues/new">Write for us</a></dd>
      <dd><a href="http://shop.ionic.io/">Ionic Shop</a></dd>
    </dl>

    <dl class="small-break">
      <dt>About</dt>
      <dd><a href="http://blog.ionic.io/">Blog</a></dd>
      <dd><a href="http://ionic.io">Services</a></dd>
      <dd><a href="http://drifty.com">Company</a></dd>
      <dd><a href="https://s3.amazonaws.com/ionicframework.com/logo-pack.zip">Logo Pack</a></dd>
      <dd><a href="mailto:hi@ionicframework.com">Contact</a></dd>
      <dd><a href="http://ionicframework.com/jobs/">Jobs</a></dd>
    </dl>

    <dl>
      <dt>Connect</dt>
      <dd><a href="https://twitter.com/IonicFramework">Twitter</a></dd>
      <dd><a href="https://github.com/driftyco/ionic">GitHub</a></dd>
      <dd><a href="https://www.facebook.com/ionicframework">Facebook</a></dd>
      <dd><a href="https://plus.google.com/b/112280728135675018538/+Ionicframework/posts">Google+</a></dd>
      <dd><a href="https://www.youtube.com/channel/UChYheBnVeCfhCmqZfCUdJQw">YouTube</a></dd>
      <dd><a href="https://twitter.com/ionitron">Ionitron</a></dd>
    </dl>

  </nav>

  <div class="newsletter row">

    <div class="newsletter-container">

      <div class="col-sm-7">
        <div class="newsletter-text">Stay in the loop</div>
        <div class="sign-up">Sign up to receive emails for the latest updates, features, and news on the framework.</div>
      </div>

      <form action="http://codiqa.createsend.com/t/t/s/jytylh/" method="post" class="input-group col-sm-5">
        <input id="fieldEmail" name="cm-jytylh-jytylh" class="form-control" type="email" placeholder="Email" required />
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">Subscribe</button>
        </span>
      </form>

    </div>

  </div>

  <div class="copy">
    <div class="copy-container">
      <p class="authors">
        Code licensed under <a href="/docs/#license">MIT</a>.
        Docs under <a href="https://tldrlegal.com/license/apache-license-2.0-(apache-2.0)">Apache 2</a>
        <span>|</span>
        &copy; 2013-2015 <a href="http://drifty.com/">Drifty Co</a>
      </p>
    </div>
  </div>

</footer>

<script type="text/javascript">
  var _sf_async_config = { uid: 54141, domain: 'ionicframework.com', useCanonical: true };
  (function() {
    function loadChartbeat() {
      window._sf_endpt = (new Date()).getTime();
      var e = document.createElement('script');
      e.setAttribute('language', 'javascript');
      e.setAttribute('type', 'text/javascript');
      e.setAttribute('src','//static.chartbeat.com/js/chartbeat.js');
      document.body.appendChild(e);
    };
    var oldonload = window.onload;
    window.onload = (typeof window.onload != 'function') ?
      loadChartbeat : function() { oldonload(); loadChartbeat(); };
  })();
</script>


    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="/js/site.js?1"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/Cookies.js/0.4.0/cookies.min.js"></script>

<script>

  $('.navbar .dropdown').on('show.bs.dropdown', function(e){
    //$(this).find('.dropdown-menu').addClass('animated fadeInDown');
  });

  // ADD SLIDEUP ANIMATION TO DROPDOWN //
  $('.navbar .dropdown').on('hide.bs.dropdown', function(e){
    //$(this).find('.dropdown-menu').first().stop(true, true).slideUp(200);
    //$(this).find('.dropdown-menu').removeClass('animated fadeInDown');
  });


try {
  var d = new Date('2015-03-20 05:00:00 -0500');
  var ts = d.getTime();

  var cd = Cookies.get('_iondj');
  if(cd) {
    cd = JSON.parse(atob(cd));
    if(parseInt(cd.lp) < ts) {
      var bt = document.getElementById('blog-badge');
      bt.style.display = 'block';
    }

    cd.lp = ts;
  } else {
    var bt = document.getElementById('blog-badge');
    bt.style.display = 'block';
    cd = {
      lp: ts
    }
  }

  Cookies.set('_iondj', btoa(JSON.stringify(cd)));
} catch(e) {
}
</script>

<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>


  </body>
</html>
