Creating a layout

In the last recipe, we explored the Ionic UI components by creating a single-page application using a blank starter template. In this recipe, we will create a clone of the Instagram mobile app's layout.

How to do it…

To start creating our own version of the Instagram UI, we follow these steps:

1. Create a new tab Ionic application project with the name as ionSnap:

   ionic start ionSnap tabs
   

2. Change the directory to ionSnap:

   cd ionSnap
   

3. Then add the device platforms to the project:

   ionic platform add ios
   ionic platform add android
   

4. Let's change the tab name. Open www/templates/tabs.html and edit each title attribute of ion-tab:

   <ion-tabs class="tabs-icon-top tabs-color-active-positive">
       <ion-tab title="Timeline" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
           <ion-nav-view name="tab-dash"></ion-nav-view>
       </ion-tab>
       <ion-tab title="Explore" icon-off="ion-ios-search" icon-on="ion-ios-search" href="#/tab/chats...