Ionic CSS components

Ionic is a combination of a powerful mobile CSS framework and a bunch of awesome AngularJS directives and services. With these, the time taken to market any idea is quite minimal. The Ionic CSS framework consists of most of the components you need to build an app.

To test-drive the available CSS components, we will scaffold a blank starter template and then add the visual components of Ionic.

Before we start scaffolding, we will create a new folder named chapter3, and scaffold all the examples from this chapter in that folder.

Note

In this chapter, we will be scaffolding one app per component to understand it better. If you want, you can use one app for all the examples.

To scaffold a blank app, run this:

ionic start -a "Example 5" -i app.example.five example5 blank

The Ionic grid system

To get a fine grain control of your layout in terms of positioning the components on the page or aligning elements next to each other with consistency, you need a grid system, and...