App Structure

BUILT WITH SASS.

This component uses SASS, which basically is CSS with superpowers. Each component has its dedicated sass files and partials well structured with independent variables so you can have maximum modularity, flexibility and customizability.

There are three main folder structures in an Ionic 3 app:

App: App has all the files needed to bootstrap the app and the main structure in which the application was built.

Pages: Here, you can see all the app pages like HTML, js, and CSS.

Theme: This folder contains all the superpowers of Sass (variables, mixins, shared styles, etc) that makes super easy to customize and extend the app.

Assets: In this folder, you will find images, sample data JSON, and any other asset you may require in your app.

Note: If you want more information, please refer to Ionic Getting Started pages.

APP

app.component.ts

It’s the main entry point of our app. It defines the basic structure and initial navigation of the app.

In our case, we have a combination of tabbed navigation and side menu navigation. In this file, we define which page would be the first one and the options and navigations of the side menu. It’s also where we get notified when the platform is ready, and our plugins (Cordova, any native stuff) are available.

app.html

Here we define the navigation and it’s root. Also, as we have a side menu, here is where we should place it’s layout.

app.module.ts

This file includes the main angular two modules (NgModule) of our app. It’s also the place where we should declare the vast majority of our dependencies, such as pages, custom components, services, etc.

app.scss

This is the main entry point for our app sass files/styles. Here you should include your app shared imports and global sass you may use and apply globally. Additionally, this file can also be used as an entry point to import other Sass files that needs to be present in the output CSS.

main.ts

These are ionic auto-generated files, and they take care of the bootstrapping of app.

PAGES

Each page has it’s folder. And within that folder you will find every related file for that page. This includes the html for the layout, sass for the customise layout on top of our styles.

Let’s get through the cart page.

search.html

All the layout for the page. Everything we do is crafted using cutting edge techniques and technologies and we always code towards customizability and ease of use. We also make use of the awesome ionic 3 components.

search.scss

This app structure makes it easy for you to know and centralize in one place where you should change the stuff. For each layout, we create one SCSS file that can be found in cart.css. If you feel like doing changes on top of our design, you can write down your code inside these files.

search.module.ts

Each pages consists of own modules and their library .

search.ts

It contains all the functionality and interactions of the page where the view logic should go.

THEMES

Here you will find all the variables, mixins, shared styles, etc. that makes this app template so customisable and extendable.

‌ Maybe you don’t know Sass, in short, is a super set of CSS that will ease and speeds up your development cycles incredibly.

variables.scss

This is the predefined ionic file where you should include all the variables you may use in your app. In our case, we defined all the colours used within the app is easy to change variables so you can play around and try different colour schemes.

$primary : #3E3D3B // You can add your own colour.

You can also customise remaining variable as well and play around colour combination.

ASSETS

It has all the app assets like images or icon file used in app.