Protected: Getting Started Ionic Framework – CSS – Part1

In this blog post, we will see what is ionic framework, where to use it and basics of Ionic CSS elements

Ionic framework is a library based on angularjs used to create hybrid apps. It has a predefined collection of directives (angularjs) and css elements providing you with a rich set of feature which are required by most apps.

Few examples would be

  1. Most android app have a pull to refresh feature. To implement this using standard angualarjs would be very difficult, ionic provides an inbuilt library for it.

  2. Infinite Scrolling: Most apps have infinite scrolling on catalog pages or pages showing data with paging. Again this is a pre-existing feature in ionic.

other important features top fixed header/footer, side menu, infinite list of items, back button, history etc.

So basically using ionic framework we get access to rich feature set which helps us make amazing hybrid apps.

Getting Started

Lets first see how to create our first ionic app.

Its a prerequisite for ionic that you know the working on phonegap and angularjs.


npm install -g cordova ionic

ionic start myApp tabs

cd myApp


If you need to run on your phone


ionic platform add android

ionic run android


or you can also open the “myApp/www” in your browser to run it directly on your browser.

Initially its better to run the app on your browser itself, because its fast to test and debug.

Above we used the command “ionic start myApp tabs”, this has many other options as well.

In the command “tabs” is name of starter project in ionic, basically this provides pre-existing code with a tabbed interface. There few other options for starter project like


ionic start myApp blank

ionic start myApp sidemenu


You can also specify any git repository


ionic start myApp


The full list is here and

Also its important to see your own app package name. You can do this via


ionic start etech_app -id com.excellence.etech_app blank


Lets now see some of the important css elements in ionic which you need to know. For full documentation on ionic css element you can check here


Ionic has grid system based on flex box,y ou can easily divide elements into multiple dynamic columns using this.

Read more about it here


Ionic provides with a default set of buttons with different colors which we can use. There are different types of buttons (block,inline,outline,header,footer,etc)

Read about it here


Cards and Lists are important design elements in a mobile application.

There are used in many places now, can read more about it here



Ionic also provide many different design variations in form.

You can go through all of them here

Above is a list of all important, must know css element in ionic.