ionic

Ionic was built by @benjsperry, @adamdbradley, and @maxlynch at Drifty, an independent bootstrapped software company and makers of such fine products as Codiqa and Jetstrap.
Ionic was built to take HTML5 on mobile into the future. We wanted a mobile framework that not only looked and worked great, but was also powerful enough to build the amazing apps the best developers were creating. HTML5's time has arrived. Ionic is the framework that proves it.


 Ionic is focused on building native/hybrid mobile apps rather than mobile websites.
As such, our browser support tends to be whatever Web View API is available to native apps on a given platform.

Ionic is an open source framework released under a permissive MIT license. This means you can use Ionic in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.

Header

Headers are fixed regions at the top of a screen that can contain a title label, and left/right buttons for navigation or to carry out various actions.

Icons

Ionic also comes with its own free and open-sourced icon font, Ionicons, with over 500 icons to choose from.
Simply add icon and the Ionicon classname for the icon to show, which can be easily looked up on the Ionicons homepage.

<i class="icon ion-star"></i>

While it's possible for buttons to use a child <i> to set the icon, they can also set their icon just by setting the buttons own class. Please take a look at button icon docs for more info.

Padding

Many components in Ionic purposely have both padding and margin reset set to zero. In many instances apps will have components bleed to the edge of the screen, and by starting each component at zero developers can easily control padding and margins throughout the app.
The padding utility classes can be reused to give any element's content some breathing room, meaning it adds a default 10px between the outer box of the element and its inner content. The following classes are not required for any element, but may be helpful with your layout.

• padding  Adds padding around every side.
• padding-vertical Adds padding to the top and bottom.
• padding-horizontal Adds padding to the left and right.
• padding-top Adds padding to the top.
• padding-right Adds padding to the right.
• padding-bottom Adds padding to the bottom.
• padding-left Adds padding to the left. 

Sub Header

A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers. Have a look at Button Bars to get other ideas on how it could be used.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Content

The content area in Ionic is the scrollable viewport of your app. While your headers and footers will be fixed to the top and bottom, respectively, the content area will fill the remaining available space.

Footer

Footers are regions at the bottom of a screen that can contain various types of content.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Footers have the same color options as the headers, just use bar-footer instead of bar-header. If a title is present in the footer, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written, such as:

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

  if no title is present and a right side button is required, you'll need to add pull-right to the right side button, such as:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>