Ion2FullApp Ionic Template
Buy Ion2FullAppLive PreviewComments
  • What is Ion2FullApp?
  • About Ion2FullApp
  • Set up
  • Code Structure
  • Customize it
  • Data Integration
  • Nifty Stuff
  • Functionalities
    • Wordpress Integration
    • Firebase Integration
    • AdMob
    • App Rate
    • Multi Language
    • Video Playlist
    • Image Picker
    • Twitter Connect
    • Facebook Connect
    • Google Connect
    • Social Sharing
    • Google Maps
    • Call Number
    • Send email
    • Native Storage
  • Troubleshooting
  • Common Questions
Powered by GitBook
On this page
  • New pages
  • Custom styles
  • New layouts
  • Splash screen and app icon

Customize it

Learn how to customize your Ionic Framework App. Learn Ionic Framework with Ion2FullApp - A super complete Ionic Template.

PreviousCode StructureNextData Integration

Last updated 6 years ago

New pages

In Ionic 3 there’s some more boilerplate compared to ionic 1, but don’t panic. The new ionic CLI also has more tools to help you out with this.

Take for example the new , they provide an easy way to create pages and services for your app. This makes going from a basic app to a full featured app with navigation much easier.

To create a page you can use the following command:

# ionic g page <PageName>
ionic g page myPage

√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss

Note: Please refer to ionic documentation for more information about to your app.

Custom styles

We have talked about this above. Believe me, Sass will be your best friend when it comes to styling, it gives superpowers to your css.

The way we structured and build the styling system for this app template will enable you to quickly modify, add and create new styles to match the look and feel and the use cases of your app. There’s much to learn about Sass to get the most out of it. We believe learning by example is the best way, and you will enjoy that benefit with our app template. Also you will find useful documentation about Sass and .

New layouts

If you find none, then try to think the way you do when developing for the web, after all one of the beautiful things and advantages about ionic is that you build stuff using web technologies (html, css, js), and such the web is an open platform you will find tons of solutions for already solved issues.

Splash screen and app icon

An app icon and splash screen (launch image) are important parts of any app, yet making them used to be incredibly tedious. You needed numerous icons for iOS and Android, and then you had to deal with splash screens and all their different sizes.

To save you the stress of dealing with all that, ionic enables you to generate app icons and splash screens via the Ionic CLI.

With the ionic CLI, all you need is a resource directory and two images. These images can be .png files, Photoshop .psd files, or Illustrator .ai files, named icon.png and splash.png.

With the images in a resources directory, ./resources, the ionic resources command will generate the icons and splash screen images for each platform setup in the project, sending them to Ionic's image resizing and cropping server, so you don't have to install extra dependencies.

If you only need to update one of the resources, or you only want to generate icons and not both, the ionic resources command has two flags that allow you to target each asset, instead of generating both.

ionic resources --icon
ionic resources --splash

If you want to implement new layouts I would highly recommend you to first search within to check if there’s one that fit your needs.

In particular when I don’t find the component I need, the approach I follow is first think the structure and elements I may need to represent and build the shell of what I want. I constantly rely on . And since I discovered it, I’ve become an expert on , and let me tell you, that makes the difference!

If you need any further assistance with this, please go to for more information.

generator functions
adding pages
here
here
ionic vast list of components
ionic grid system
Flexbox
ionic cordova resources