Ionic 3/Angular 6 Orange Lightis a
multipurpose app templatethat anyone can use to
create an app for almost anything. This app starter is the
embodiment of the saying “Less is more”, as we built a minimalist
and feature-rich Ionic app template, which will blow your mind once
you get acquainted with its features. Considering the fact that
this app starter is built using Ionic, a hybrid mobile app
development framework, apps you build with it will run on multiple
more than 80 layouts, you will be able to obtain a
complete look for your app, without the need of spending numerous
hours drawing your own elements.
Main features of Ionic 3/Angular 6 Orange Light UI Theme
Ionic 3/Angular 6 Orange Light Theme/Template
App includes everything you needto build both
beautiful and functional Ionic app. Below is the full list of
features included in this app template, so be sure to check them
out before you make a purchase.
Firebaseis a powerful tool owned by Google which
enables developers to build collaborative apps without the hassle
of managing servers of writing server-side code. If you would like
to build Firebase-powered Ionic app, then this is the template for
Built with Sass (Syntactically Awesome Style Sheets)
Nowadays, CSS preprocessors are a standard for web development.
One of the main perks of preprocessors is that they enable you to
use variables. This circumvents the need for copying and pasting
code, and simplifies development.
Sass is one of the most popular preprocessor
languagesdeveloped 11 years ago by Hampton Catlin. It adds
some features that do not exist in pure CSS, such as mixins,
nesting selectors, inheritance, variables etc.
MailChimp is the
biggest email marketingprovider that offers a
generous free plan. Our app starter provides MailChimp integration
that can help you in collecting leads for your e-mail campaigns and
track results. You just need to change the ID of your MailChimp
list and you’re done.
Form validation (to be more precise – form field validation)
forces the user to fill out all the required fields in the correct
format. Setting up form validation form scratch is a tedious chore,
but with our app starter you can avoid it.
Push notifications are a direct and convenient way to
connect with the usersof your app. Push
notifications can promote products, remind users to use the app,
and even drive users to other marketing channels like social
networks. With our template, you will be able to effortlessly send
push notifications, over Firebase.
All Ionic app starters crafted by Creative Form (including this
one) are built to suit a wide range of device sizes. All screens in
Ionic 3/Angular 6 Orange Light template app are
made responsive over Split Panecomponent.
Additionally, ion-grid (heavily influenced by Bootstrap’s grid
system) is included in each component.
Google Maps & Google Analytics integration
Google Analytics is extremely useful because it offers detailed
information about every single thing users do while using the app.
Each screen of Ionic 3/Angular 6 Orange Light UI Theme is
set up with Google Analytics. Considering Google
Maps integration, our theme contains 3 layouts with Google Maps API
component (Location details, About us and Full screen view). We
enabled Satellite and Map functions, as well as Street View
Excellent customer support and lifetime free updates
Our team consists of experts with years of experience, so every
issue you can’t resolve following our detailed documentation, will
be resolved by them within a reasonable timeframe. In addition to
great customer support, Ionic 3/Angular 6 Orange Light provides
free update. We are following the official Ionic updates, so every
future update of this template will be at your disposal after you
purchase the license.
What makes our Ionic 3/Angular 6 Orange Light app starter so
pleasing to the eye?
The importance of good design is beyond having something that
looks nice, it is about creating a pleasant UX from beginning to
end, and that is exactly what you will achieve by using our app
Icons play a major role in design. We included a wide range of
800+ icons from including default Ionic icons. Just pick the right
ones and integrate them into your app.
several blend modesso every image in the app will
look great, which will boost the aesthetic side of your app.
All fonts used in this app starter are free, and from Google
Fonts library. Nevertheless, if you want to use some other fonts,
you can easily replace the existing ones in just one line of code
in the main SASS file.
With the help of animate.css we produce several animated
elements that will raise the UX of your mobile app.
Colors and color combinations of the Ionic 3/Angular 6 Orange
Light Theme are made from the Google color palette and by their
Open source projects and technologies
Building such a comprehensive app starter like this one is not
an easy endeavor. In order to be able to make all the components we
considered necessary, we had to seek help from several technologies
and open source projects. If you are a developer, you have probably
used some of these technologies, so this is just a quick overview
of their principal characteristics.
Ionic is an open source mobile frameworkthat uses
apps. With one codebase, you can develop apps for iOS, Android,
Windows Phone, Web, Desktop and PWA (Progressive Web Apps). The
original version was released back in 2013, and built on top of
Angular JS and Apache Cordova. Our template is based on the latest
Ionic version – Ionic 3.
application platform mainly maintained by Google and a community of
frameworks, since its library offers features that make it easy to
implement complex requirements of modern apps (like data binding,
animations and routing). Our Orange Light Theme/Template uses its
latest version – Angular 6.
Sass, also known as CSS with superpowers, is a CSS preprocessor
which adds special features which are not available in CSS, like
variables, mixins, nested rules, inheritance etc. First appearing
in 2007, Sass was designed by Hampton Catlin and developed by
Natalie Weizenbaum, Sass is extremely useful as it adds advanced
functionalities and mitigates the repetitive nature of CSS.
Cordova plugins represent a bit of add-on code that provides
use native device capabilities.
Made by Ola Christensson, Elastic header with zoom represents
Ionic/Angular directive for elastic headers.
Animate.css is a fantastic little CSS library that has been
around for a while, and is used to create really nice animation
effects using just CSS. It eliminates the need for creating custom
animations, we can just import the library and use it.
NOTE:If you plan to sell your application over
Play Store or to have in-app purchase, you should buy extended
Full feature list
All UI components list:
Google Maps– 3 screen with implemented GMaps API.
We included it in page About us whish is very usable for bussiness
app and company presentations. Also there is page called Location
details which main purpose is for restaurants or some other
location based apps. And of course there is Full page screen if you
want to have bigger overview of maps. Fucnionality as
Satellite/Maps and Street View is also vailable.
QR code & Barcode scanner– Fully funcional
scanner with support for various types of code. There is also one
themed screen for showing results of scanning. Our scaner supports:
QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128,
CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED for Android.
For iOS it support: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8,
EAN_13, CODE_128, CODE_39, ITF.
List Views– Four types of List Views:
Expandable (3 layouts), Drag&Drop (3 layouts), Swipe to
dismiss (3 layouts), and Google Cards (3 layouts).We used
some elements of Ionic 2 framework but we weren’t happy how it
looks so we upgrade and polish them to be prettier and easier to
work with them. All of them have their own specific effects and
functionalities. Also we added Appearance animations that can be
combined with all five List Views for better look and user
In total 12 screens of List Views.Open source
project used in this components:
Parallax Effect (4 layouts)– We made new component
for Ionic 3 / Angular 4 and we combine it with Ionic 3 lists and
get beautiful Material Design UI element. Open source project
Left menu (1 layouts)– We used standard (or side
menu) ) and we designed it to match our theme combining gradients
and photos with SASS/CSS blend modes.
Login & Register (2+2 layouts)– Login with
small but nice letter effect with HD images in background. 2 login
screen + 2 register screen.
Image Gallery (4 layouts)– Gallery and sub-gallery
with cool Ripple effect. We also make full-screen image preview
screen so you don’t need to code.
Check buttons (3 layouts)-Matching styles for
every of UI layouts.
Splash screens – 3 Splash screenscombined with Ken
Burns effect (made from scratch by us) and several logo entrance
Typo and small components– Page with typography
(h1…h6, p). All made with default and fonts but you can easily
replace it with font by your wish. We also added in SASS
controlling variables for 3 levels of spans (small, medium, large),
3 levels of icon sizes (small, medium, large), 3 levels of badges
(small, medium, large) and 3 levels of social icons (small, medium,
Search bars (3 layouts)– search bars for quick
implementation in your app that fit perfectly with every Ionic 2
Wizards (3 layouts)– Two different layouts of
wizards. Can be used for app usage intructions, intros, explanators
Spinners/loaders (10 types)– Made of animated
SVG’s. Open source project used in this components:
Technologies and open source projects
To be able to make all of Ionic 2/Angular 2 components in
Material Design we had to use several technologies and few open
source projects. In documentation we have explained how to use this
projects. Here is list what we used to bring our design to
– Makers of SASS call it “CSS with superpowers”.
And it is! Sass boasts more features and abilities than any other
CSS extension language. Also it is completely compatible with all
versions of CSS.
– it is open source mobile framework for
developing hybrid mobile and web apps. With Ionic you can produce
Android, iOS and Windows mobile apps at once.
– Angular 2 is a structural framework for dynamic
web apps. It lets you use HTML as your template language and lets
you extend HTML’s syntax to express your application’s components
clearly and succinctly.
– jQuery is a fast, small, and feature-rich
and manipulation, event handling, animation, and Ajax much simpler
with an easy-to-use API that works across a multitude of
– ngCordova is a collection of 70+ AngularJS
extensions on top of the Cordova API that make it easy to build,
test, and deploy Cordova mobile apps with AngularJS.
– “Just-add-water CSS animations” made by Daniel
Eden is collection of beautiful CSS animations.
– is Ionic/Angular directive for elastic headers
made by Ola Christensson.
Why our customers love us?
“Solve all your doubts!”
Emmarango, Material Design UI Ionic Template app
“Excellent. You saved me a lot of development effort.
Alessandrotorres, Material Design UI Android Template app
“Couldn’t pick one area for the 5 star review. Overall quality,
design and usability are excellent. Support is also fantastic.
Thanks for help. Luke”
Betty8080, Material Design UI Android Template app<
“One of the best in all respects.”
Nikhil3831, Material Design UI Android Template app
“Everything is clear. @developer, nice work”
Satyagvns, Material Design UI Android Template app
“Excellent work. thanks for sharing :)”
Bisoncode, Material Design UI Android Template app
“Most features required for app design and development
available. We gone build an app for gozopping.com with this, and
make our customer go mad.. thx a lot.”
Ojalsuthar, Material Design UI Android Template app
Vanduh, Material Design UI Android Template app
“Fantastic, thanks. I’m sure I’ll be buying more sources from
Henrik S., HD wallpaper Android Template App
“Great design quality!”
Dedania23, HD wallpaper Android Template App
Excellent customer support
- We are offering FREE after sales support around. We care about
your apps as much as you and we will help you in any way
- FREE Lifetime Updates – get all the new features we add in each
future update for free.
- Once you purchase, you can use our dedicated support where we
quickly answer your questions.
- Includes great you can find and it’s constantly being updated
with new material.
- Basic tutorials for newcomers about importing our
- Contact us at
- Working hours: 09:00 – 16:00h, UTC+01:00. From Monday to
The images used in demos are not included in the downloaded ZIP
file. All images belong to their rightful owners. Full lists of