To get started lets create an ionic project from the command line and cd into it.
The project will be called sass and it will be based off the tabs example
Out of the box, sass and it’s dependencies aren’t included but can be added by running
ionic setup sass.
Alternatively you could manually things, but this command simplifies the process.
What this command does is downloads the gulp build tools needed for working with sass. Don’t worry if you’re unfamiliar with Gulp tasks because these will run in the background for you. However, we also make it easy to fully customize your gulpfile if you choose to.
We can startup up our app now with ionic serve. Here we can see we have the default styles for a tabs application. Our tab-bar is tabs-light and nav-bar is bar-light. Lets change this to use bar-positive and tabs-positive.
This command is a short cut to open my text editor, atom, in the current working directory.
So now we have a blue tabs-bar and a blue nav-bar. Lets navigate to the s-c-s-s folder and open the
Here we can see some variables used in ionic’s css. We can override these variables and use what ever color we would like. So since we’ve used the positive variable in our app, let’s go ahead and override it’s default value
As soon as we save this file, our sass will be compiled and our live preview will automatically be updated
In a formula we will expand on this sass file and start to create our own custom theme
A walkthrough on installing Cordova, Android, and Ionic on Windows 7 and 8
Learn how to easily make tabbed interfaces, one of the most common UI patterns for mobile, in Ionic.
The side menu is a great way to display content without losing a lot of screen real estate. Learn how to add the side menu to your apps.
A core element to any app is the display of lists. From todos to social feeds, lists are the building block for much more complex UIs. Learn about lists in Ionic in this video.
Learn how to start using Ionic for iOS with this video. An introduction, prerequisites, and getting a basic application running on a simulator will all be shown.