Book Image

Ionic Framework By Example

By : Sani Yusuf
Book Image

Ionic Framework By Example

By: Sani Yusuf

Overview of this book

Change doesn’t have to be challenging. Sometimes it can be simple – sometimes it just makes sense. With Ionic, mobile development has never been so simple, so elegant and obvious. By helping developers to harness AngularJS and HTML5 for mobile development, it’s the perfect framework for anyone obsessed with performance, and anyone that understands just how important a great user experience really is. This book shows you how to get started with Ionic framework immediately. But it doesn’t just give you instructions and then expect you to follow them. Instead it demonstrates what Ionic is capable of through three practical projects you can follow and build yourself. From a basic to-do list app, a London tourist app, to a complete social media app, all three projects have been designed to help you learn Ionic at its very best. From setting up your project to developing on both the server side and front end, and best practices for testing and debugging your projects, you’ll quickly become a better mobile developer, delivering high performance mobile apps that look awesome. Ionic Framework by Example is for people who don’t want to learn now, build later – it’s for people who want to learn and build at the same time – so they can meet today’s mobile development challenges head on and deliver better products than anyone else.
Table of Contents (18 chapters)

Customizing the look and feel of your app


When you created an Ionic application using one of the Ionic templates, you would have noticed by now that it comes with some built-in default CSS styles. Many times you will want to know how you can add your own colors and styles while keeping some of the built-in Ionic styles.

Ionic styles with SASS

This is well thought out by the Ionic team and for this reason, they actually created all their CSS styles using SCSS. SCSS is an independent technology based on SASS that lets you write CSS in an object-oriented way which then gets compiled into CSS. SCSS is a really cool way to write CSS rules as it allows us to create variables and use them to create our style sheet. If you are completely new to SCSS and you want to see some brief information about SCSS, feel free to visit http://sass-lang.com.

Now, let's have a look at the folder structure of an Ionic project once more with customization of our styles with SCSS in mind.