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
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.
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.
Lets first see how to create our first ionic app.
npm install -g cordova ionic
ionic start myApp tabs
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 https://github.com/driftyco/ionic-starter-sidemenu
The full list is here https://github.com/driftyco?utf8=%E2%9C%93&query=starter and http://codepen.io/ionic/public-list/
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 http://ionicframework.com/docs/components/
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 http://ionicframework.com/docs/components/#grid
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 http://ionicframework.com/docs/components/#buttons
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 http://ionicframework.com/docs/components/#forms
Above is a list of all important, must know css element in ionic.