· 80+ functional screens
· iOS11 design
· Built with mega-powerful Sass
· Fully responsive
· Firebase backend
notifications and much more!
Ionic 3 UI Green Light theme is our newest theme that has
more than 80 iOS design HTML5 layouts, and will help you to build a mobile app
without the need of spending numerous hours coding.
Our template is based on mega-popular Ionic framework, a
hybrid approach to developing mobile apps which is gaining ground over true
List of mobile components available in Ionic 3 UI Theme
The hard task of building a mobile app from scratch can be
avoided by using our Ionic 3 UI Theme / Template, as we incorporated numerous
functionalities which are listed below.
List views (5 types)
Tabs (3 layouts)
Parallax Effect (4 layouts)
Login & Register (2+2 layouts)
Image Gallery (4 layouts)
Wizards (3 combos, 9 layouts)
Splash screen (3 layouts)
Check boxes (3 layouts)
Radio buttons (3 layouts)
4 Types of Range (1 layout)
Toggle (3 layouts)
Action Sheet (3 layouts)
Select (2 layouts)
Google Maps (3 layouts)
Spinners/loaders (10 types)
QR code and barcode scanner (1 layout)
Search bars (3 layouts)
Our theme documentation contains all kinds of necessary
information, so be sure to check it out before getting started. You have also
at your disposal our video tutorials that can resolve any doubts regarding
import and usage.
Most prominent features of Ionic 3 UI Theme
Built with Sass
Also known as “CSS with superpowers”, is a
stylesheet language that extends the capabilities of CSS. It helps you to save
numerous lines of code if you are in a relatively big project. SASS makes it
possible to manage efficiently and reuse the code without touching the real CSS
Firebase is a mobile platform that enables you to quickly
develop cutting-edge apps. With the latest version of our Ionic 3 mobile app
template you can change all static elements (texts, icons, images)
in no time without a need to code, all over Firebase.
MailChimp is one of the best email marketing software
applications, as it offers a variety of signup forms and list-management
options. Ionic 3 UI Theme provides easy MailChimp integration that will help
you in collecting leads for your e-mail campaigns and track results. All you
need to do is to change ID of your MailChimp list and your job is done.
Push notifications provide numerous benefits to both users
and app publishers. For app publishers, push notifications are a way to
directly communicate with a user. They are a convenient way to remind users to
use an app, promote products or even drive users to other marketing channels
such as social networks. With our template, you can send push notifications to
your users without difficulty, over Firebase.
One of the main ways to cater to a larger user base using an
array of devices is to keep your design responsive. Our every template is made
in a manner that they look great on all device sizes. All screens in Ionic 3 UI
mobile template are responsive over ion-split-pane component. Additionally, we
included ion-grid in all components which is based on Bootstrap’s
Google Analytics in one of the best ways to cater to your
users as it tracks their behavior and how they interact with your app. The main
reason why Google Analytics is so useful is because it offers detailed
information about every single thing user does while using the app. Every
screen of our template is set up with Google Analytics, so no click will be
Our Ionic 3 UI Theme contains 3 new 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 browsing.
QR & Barcode scanner
Along with other benefits you get when purchasing our
template, there is a fully functional scanner with support for various types of
code. Our scanner 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 supports: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128,
When building an app, it is important to make sure than the
data users fill out in the forms is in the correct format, in order to process
it successfully and to prevent users from being frustrated when trying to use
our app. Form validation integrated in our template helps us in achieving these
goals, so there will be no more incomplete submits or empty fields.
10 most popular mobile app components
Our main goal in creating this template was to make a
multipurpose mobile app template suitable for developing all types of apps you
can find on Google App or App Store. Do to so, we used 10 most popular mobile
app components, all of which have several different layouts.
We offer five types of List Views: Expandable (3 layouts),
Drag&Drop (3 layouts), Swipe to dismiss (3 layouts), Google Cards (3
layouts), and Sticky List Headers (3 layouts). We added Appearance animations
than can be combined with all 5 List Views, in order to achieve better user
experience. Altogether, we have 15 different List Views layouts that will
surely satisfy your specific needs. Sticky
List Header was the open source project we used to build this component.
Parallax Effect (4 layouts)
We made a new component for Ionic 3 / Angular 4 and combined
it with Ionic 3 lists which produced a stunning Material Design UI element. Elastic header with zoom was the open
source project we used.
Left menu (1 layout)
We used standard Ionic
left menu, and designed it to match our theme combining gradients and
photos with SASS/CSS blend modes.
Login + register (4 layouts)
With our 2 Login and 2 Register layouts that use attractive
letter effect with HD images in background, your Login/Register screens will be
perfectly blended with the overall design of your app.
Image gallery (4 layouts)
For those developers who are making apps that use galleries,
we made 4 different gallery and sub-gallery layouts that are enriched with
Check boxes (3 layouts)
Our template offers 3 different layouts of check boxes with
matching styles for every UI layout.
As we already know, first impression is very important,
therefore it is important that our app provides rocking first impression. This
can be achieved with splash screen, also known as load screen or boot screen.
To help you achieve that alluring first impression, we created 3 different
Splash screens combined with Ken Burns effect and several logo entrance
Search bars (3 layouts)
Search bars can make navigating through your app
significantly easier for users, and consequently improve user experience. We
made 3 different layouts for search bars that can be easily implemented in your
Wizards (3 layouts)
Wizards represent a convenient way to explain all the
functionalities of the app to your users. This component is also used when new
features are added in apps via updates. Over 3 different layouts of wizards
will transform usage instructions, explanations and intros into interesting
Our Ionic 3 UI theme offers you a choice of 10 types of
spinners/loaders, your only task is to choose the one that is the best for your
project. They are all made of animated SVG’s. Open source project that
helped us in creating this component is SVG-Loaders.
What makes our template look the way it does?
As we mentioned earlier, this template is built with SASS,
also known as “CSS with superpowers”. SASS definitely
deserves this nickname, as it possesses more features and abilities than any
other CSS extension language. In addition, it is compatible with all version of
Our complete theming system is made over one super-organized
main SASS file, where you can change and adjust almost all variables in all 80+
layouts at once. This means that the apps using our template can be easily
customized to suit your or your client’s needs.
iOS11 design that suits Android too
Released on September 19, iOS11 is the next-generation
version iOS. Apple is well known for its distinctive design (clean, friendly
and fun), and we tried to implement that design aesthetic on our template.
Ionic 3 UI Theme comes with more than 800 Material Design
icons from materialdesign.com. We used Fontello font to create them in scalable
SVG format, which means that your worries about different sized PNG’s
are becoming past.
SASS/CSS blend modes
You have several blend modes at your disposal (including
black/white, darkening, gradients), therefore your images will go hand
in hand with your app.
As we mentioned earlier, our template is built with Sass,
which is very convenient when changing fonts. Namely, if you wish to change font
on all screens, you can do it in only one line of code in the main SASS file.
We used Roboto and Lato, as suggested by Google.
In combination with Animate.css we produced several animated
elements that will bring UX quality of your mobile app to the next level. We
gave our best to enrich UI elements with animation and transparency – a trend very
popular in web development.
On all screens and layouts there are 4 sizes of images
(200x200px, 600x300px, 600x150px and 130×220 px). All other used sizes are made
automatically, which will save you a substantial amount of time while
developing your app. Background are full HD (1920x1080px).
Colors and color combinations of this template are made in
accordance with iOS styleguides.
All graphic elements are inspired by iOS11 and can be
combined in numerous ways. This gives you a chance to design you app in unlimited
ways, and adjust it to your brand or your client’s preferences.
Incorporated technologies and open source projects
In order to make all of Ionic 3/Angular 4 components in
iOS11 Design we needed help from several technologies and open source projects.
Our documentation contains all the necessary explanations regarding the usage
of this projects. Below is the list what we used to achieve the end result:
SASS (Syntactically Awesome Stylesheets) – a stylesheet
language that extends the capabilities of CSS. It helps you to save numerous
lines of code if you are in a relatively big project. SASS makes it possible to
manage efficiently and reuse the code without touching the real CSS code.
Ionic 3 – One of the most popular frameworks for mobile
hybrid apps is Ionic, which is built on top of Angular.js and Apache Cordova.
Ionic aims to alleviate the process of creating apps for numerous platforms,
getting rid of the need of duplicating the same code in multiple different
languages for different platforms.
Angular 4 – is a structural framework that makes it easy to
build applications with the web. It enables using HTML as your template
language and makes possible to extend HTML’s syntax to express application’s
2006. It simplifies HTML document traversing, animating, event handling, and
Ajax interactions for rapid web development.
NgCordova – a set of wrappers built to help make app
development faster and more efficient than ever before. It provides simple
AngularJS wrappers for the most popular Cordova and PhoneGap plugins available.
Animate.css – a collection of cool, amusing, and
cross-browser CSS animations made by Daniel Eden.
Elastic header with zoom – made by Ola Christensson,
represents Ionic/Angular directive for elastic headers.
Tested on various devices
Many believe that the real difference between an app that
sells and one that does not is testing. Users are more likely to abandon an app
that has functionality problem, no matter which capabilities it has.
With our template this will not represent an issue, as we
tested our template on numerous devices and OS versions.
Every UI element and layout works great on iPhone 4, iPhone
4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6s, iPhone 6 plus and iPhone 6s plus.
Regarding Android devices, we tested our template on Samsung
Galaxy S7 (Android 6), Sony Xperia Z2 (Android 6), Samsung Galaxy J5 (Android
5.1), Sony M2 (Android 5.1), Samsung S4 (Android 4.4).