Material Design UI Ionic Template App

0
(0)

This is Ionic 1 template. If you are searching for Ionic 3 templates, please check our porfolio.


Try before you buy!

Download demo app!Download demo app!Download demo app!Download demo app!Download demo app!

Subscribe!

Finished components and layouts


5 UI themes

Unified graphic and clean code

Font icons and blend modes

Change fonts and events done!

Excellent support and life time free updates
Ionic online documentationIonic video instructions

Ionic expandable list view


Ionic drag and drop list view


Ionic swipe to dissmis list view


Ionic appearance animations


Ionic sticky list headers list view


Ionic cards


Ionic parallax home with list view


Ionic lfet menu side menu


Ionic login and register screens


Ionic image gallery


Ionic shape image views


Ionic check box


Ionic splash screen with Ken Burns effect


Ionic search bar field


Ionic wizards guides


Ionic spinners loaders

Why our customers love us - actual testimonials


Material Design UI Ionic Template App - 1


Material Design UI Ionic Template App - 2


Material Design UI Ionic Template App - 3


Material Design UI Ionic Template App - 4


Material Design UI Ionic Template App - 5


Material Design UI Ionic Template App - 6


Material Design UI Ionic Template App - 7


Material Design UI Ionic Template App - 8


Material Design UI Ionic Template App - 9


Material Design UI Ionic Template App - 10


Material Design UI Ionic Template App - 11


Material Design UI Ionic Template App - 12


Material Design UI Ionic Template App - 13


Material Design UI Ionic Template App - 14


Material Design UI Ionic Template App - 15


Material Design UI Ionic Template App - 16


Material Design UI Ionic Template App - 17

Get 300+ Ionic UI screens and build your Ionic/AngularJS mobile app.

Save hours of developing by using our 60+ beautifully designed HTML5 layouts. Choose between 3 light and 2 dark themes. Or combine hundreds of HTML5 UI components by your wish.

Don’t lose time in breaking your head and build HTML5 mobile app from scratch – we did it for you!

We made super-organized main SASS file with all needed variables in wish to provide developers low time consuming tool for fast and clean-code development of best mobile apps. By using our template you can quickly produce best mobile apps for Android and iOS.

Now you have maximum flexibility and you can easy customize every theme to your needs to all 60+ layouts at once.

In our Ionic/AngularJS UI components we expanded default Ionic’s features and functionalities and added them Material Design polishing. All elements are inspired with Google’s Material Design and created by their instructions.

You can easy implement UI elements source code from Ionic UI template by following our huge and well organized documentation.

You just code (little bit), we do the design.

Check our example demo apps!

Easy as cake. Happy coding!  :)

NOTE: If you plan to sell your application over Play Store or to have in-app purchase, you should buy extended license.

Full feature list

  • BUILT WITH SASS (Syntactically Awesome Style Sheets)

    – as name said: it is awesome! We made complete theming system over one super-organized main SASS file where you can change and adjust almost all variables in all 60+ layouts at once. With SASS you can fast customize our themes or even make new.

  • Two frameworks combined: Ionic
    Materialize

    framework. Develop your mobile web app front-end fast as lightning!

  • 60+ finished layouts ready to use

    – build your mobile application over directives. Every directive contain 5-7 HTML5 layouts that can be very easily implemented. Of course you can customize it and create unique HTML5 mobile app. Or you can use default Materialize’s classes. All you need to do is to provide content.

  • 5 themes – all 60+ UI components are made in 3 light and 2 dark themes: BLUE LIGHT, GREEN LIGHT, PURPLE LIGHT, YELLOW DARK and RED DARK.
  • Unified graphic

    – all graphic elements are inspired by

    Google’s Material Design

    and they can be combined infinitely. Even if you want to combine UI components from different themes it is possible with just few tweaks.

  • Many UI elements have animation and/or transparency – beautiful transparent animations which are more and more popular in web development.

  • Icons – included wide range of 800+ Material Design icons from Materialdesignicons.com over Fontello font. No more different sized PNG’s – we make it over scalable SVG format. Also there is a 740+ default icons from Materialize framework. So you get a lot of Ionic icons.
  • Every UI element and layout work on Android 4.4 and up to latest Android version. We test it 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). Also we test it on GenyMotion. And everything works perfect.  :)
  • Everything tested too (and works great) on iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6s, iPhone 6 plus and iPhone 6s plus.
  • Clean code with comments – all HTML5, CSS3 and SASS files are well commented for easier and quicker development and customizing.
  • Fonts changeable in one line of code – we used web fonts (Roboto and Lato) as Google suggest it but it is very easy to replace it in only one line of code in main SASS file (by changing URL to web font). Note: If you plan to change font we suggest that you change it with some web fonts that have same number of font weights.
  • SASS/CSS blend modes – We made several blend modes (black & white photo, darkening and gradients) so every image in app will looks perfect and boost aesthetic side of your app. Users loves nice app!
  • CSS animations – in combination with Animate.css we produce several animated elements that will raise UX quality of your mobile app
  • Images – through all themes there is just 4 sizes of images (200×200px, 600×300px, 600×150px and 130×220px). Backgrounds are full HD (1920×1080px). All other used sizes are made automatically.
  • Colors – colors and color combinations of every Ionic theme are made from Google Material Design color palette and by theirs guidelines.
  • Events – on every button we provide clickable “event” that you can override and customize by your needs. Also we set toasts for every “event”.
  • Ripple effect – included in almost all UI components at hover state.

All UI components list:

  • List Views – Five types of List Views: Expandable (5 layouts), Drag&Drop (5 layouts), Swipe to dismiss (5 layouts), Sticky list headers (5 layouts) and Google Cards (6 layouts). We used some elements of Ionic framework and combine them with Materialize. 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 experience. And of course everything is made in five Material Design Ionic themes which makes in total 130 screens of List Views. Open source project used in this components: Sticky List Header
  • Parallax Effect (6 layouts) – We made new component for Ionic/AngularJS in way that we combined Materializer’s Parallax with Ionic lists and get beautiful Material Design UI element. Also we combine it with swipe and we made Parallax Swiper.  :) Combined with 5 themes you get 30 screens of parallax. Open source project used: Elastic header with zoom.
  • Left menu (5 layouts) – We used standard Ionic left menu (or side menu) ) and we designed it in five layouts combining gradients and photos with SASS/CSS blend modes and make 30 screens in total.
  • Login & Register (6 layouts) – Materializer’s login with small but nice letter effect with HD images in background. 5 login screens + 2 register screens multiplied with 5 themes and you get 30 login screens.
  • Image Gallery (3 layouts) – Gallery and sub-gallery with cool Ripple effect. We combine them with every of our UI themes and as result you have 15 screens of galleries.
  • Shape Image Views – 32 shapes prepared for using for avatars or/and profile images and chosen to match our themes. All made with SVG shapes so can be easily replaced with your own SVG images.
  • Check buttons (5 layouts) -Matching styles for every of UI layouts. Also we make two version combining check buttons with Expandable effect which you can use for filters (for ex. with search fields). 25 screens in total.
  • Splash screens – 3 Splash screens combined with Ken Burns effect (made from scratch by us) and several logo entrance animation.
  • Typo and small components – Page with typography (h1…h6, p). All made with default Roboto and Lato 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, large).
  • Search bars (5 layouts) – search bars for quick implementation in your app that fit perfectly with every Ionic theme. We made 25 screens.
  • Wizards (5 layouts) – Five differnet layouts of wizards. Can be used for app usage intructions, intros, explanators etc. Combined with 5 themes you get 25 screens.
  • Spinners/loaders (10 types) – Made of animated SVG’s. Open source project used in this components: SVG-Loaders

Technologies and open source projects

To be able to make all of Ionic/AngularJS 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 life:

  • SASS (Syntactically Awesome Style Sheets) – 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.
  • Ionic – 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.
  • AngularJS – AngularJS 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 – jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • NgCordova – 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.
  • MaterializeCSS – it is a modern and responsive front-end framework based on Google’s Material Design.
  • AnimateCSS – “Just-add-water CSS animations” made by Daniel Eden is collection of beautiful CSS animations.
  • Sticky List Header (ion-affix) – is a lightweight Angular directive for Ionic framework to have sticky affix element made by Ali OK.
  • Elastic header with zoom – 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. Great!”
Alessandrotorres, Material Design UI Android Template app

“Excellent. You saved me a lot of development effort. Great!”
Alessandrotorres, 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

“Absolutely amazing.”
Vanduh, Material Design UI Android Template app

“Fantastic, thanks. I’m sure I’ll be buying more sources from you.”
Henrik S., HD wallpaper Android Template App

“Great design quality!”
Dedania23, HD wallpaper Android Template App

Excellent customer support

  • We are offering FREE SUPERB after sales support around. We care about your apps as much as you and we will help you in any way possible.
  • 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 online documentation you can find and it’s constantly being updated with new material.
  • Basic tutorials for newcomers about importing our template.
  • Contact us at [email protected]
  • Working hours: 09:00 – 16:00h, UTC+01:00. From Monday to Friday.

Updates

Version 2.0 – 08. November 2016.

  • SASS structure added!
  • Totally redesigned.
  • 5 themes added: Yellow dark, Green light, Red dark, Blue light and Purple Light.
  • Live preview added.
  • A lot of minor bugs fixed.

Version 0.1.2 – 06. August 2016.

  • Five Wizards added.
  • Ten Spinners/loaders added.
  • Google cards loading fixed.
  • Social networks login buttons added on login screens.
  • Minor bugs fixed.

Version 0.1.4 – 12. September 2016.

  • New layout added: Parallax Swiper.
  • Minor bugs fixed.

Credits

The images used in demos are not included in the downloaded ZIP file. All images belong to their rightful owners. Full lists of credits are here


3.62
Source

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Be the first to comment

Leave a Reply

Your email address will not be published.


*


Privacy Policy

0
(0)

BootstrapDeive.com is committed to safeguarding your privacy. Contact us at if you have any questions or problems regarding the use of your Personal Data and we will gladly assist you.

By using this site or/and our services, you consent to the Processing of your Personal Data as described in this Privacy Policy.

Table of Contents

  1. Definitions used in this Policy
  2. Data protection principles we follow
  3. What rights do you have regarding your Personal Data
  4. What Personal Data we gather about you
  5. How we use your Personal Data
  6. Who else has access to your Personal Data
  7. How we secure your data
  8. Information about cookies
  9. Contact information

Definitions

Personal Data – any information relating to an identified or identifiable natural person.
Processing – any operation or set of operations which is performed on Personal Data or on sets of Personal Data.
Data subject – a natural person whose Personal Data is being Processed.
Child – a natural person under 16 years of age.
We/us (either capitalized or not)

Data Protection Principles

We promise to follow the following data protection principles:

  • Processing is lawful, fair, transparent. Our Processing activities have lawful grounds. We always consider your rights before Processing Personal Data. We will provide you information regarding Processing upon request.
  • Processing is limited to the purpose. Our Processing activities fit the purpose for which Personal Data was gathered.
  • Processing is done with minimal data. We only gather and Process the minimal amount of Personal Data required for any purpose.
  • Processing is limited with a time period. We will not store your personal data for longer than needed.
  • We will do our best to ensure the accuracy of data.
  • We will do our best to ensure the integrity and confidentiality of data.

Data Subject’s rights

The Data Subject has the following rights:

  1. Right to information – meaning you have to right to know whether your Personal Data is being processed; what data is gathered, from where it is obtained and why and by whom it is processed.
  2. Right to access – meaning you have the right to access the data collected from/about you. This includes your right to request and obtain a copy of your Personal Data gathered.
  3. Right to rectification – meaning you have the right to request rectification or erasure of your Personal Data that is inaccurate or incomplete.
  4. Right to erasure – meaning in certain circumstances you can request for your Personal Data to be erased from our records.
  5. Right to restrict processing – meaning where certain conditions apply, you have the right to restrict the Processing of your Personal Data.
  6. Right to object to processing – meaning in certain cases you have the right to object to Processing of your Personal Data, for example in the case of direct marketing.
  7. Right to object to automated Processing – meaning you have the right to object to automated Processing, including profiling; and not to be subject to a decision based solely on automated Processing. This right you can exercise whenever there is an outcome of the profiling that produces legal effects concerning or significantly affecting you.
  8. Right to data portability – you have the right to obtain your Personal Data in a machine-readable format or if it is feasible, as a direct transfer from one Processor to another.
  9. Right to lodge a complaint – in the event that we refuse your request under the Rights of Access, we will provide you with a reason as to why. If you are not satisfied with the way your request has been handled please contact us.
  10. Right for the help of supervisory authority – meaning you have the right for the help of a supervisory authority and the right for other legal remedies such as claiming damages.
  11. Right to withdraw consent – you have the right withdraw any given consent for Processing of your Personal Data.

Data we gather

Information you have provided us with
This might be your e-mail address, name, billing address, home address etc – mainly information that is necessary for delivering you a product/service or to enhance your customer experience with us. We save the information you provide us with in order for you to comment or perform other activities on the website. This information includes, for example, your name and e-mail address.

Information automatically collected about you
This includes information that is automatically stored by cookies and other session tools. For example, your shopping cart information, your IP address, your shopping history (if there is any) etc. This information is used to improve your customer experience. When you use our services or look at the contents of our website, your activities may be logged.

Information from our partners
We gather information from our trusted partners with confirmation that they have legal grounds to share that information with us. This is either information you have provided them directly with or that they have gathered about you on other legal grounds. See the list of our partners here.

Publicly available information
We might gather information about you that is publicly available.

How we use your Personal Data

We use your Personal Data in order to:

  • provide our service to you. This includes for example registering your account; providing you with other products and services that you have requested; providing you with promotional items at your request and communicating with you in relation to those products and services; communicating and interacting with you; and notifying you of changes to any services.
  • enhance your customer experience;
  • fulfil an obligation under law or contract;

We use your Personal Data on legitimate grounds and/or with your Consent.

On the grounds of entering into a contract or fulfilling contractual obligations, we Process your Personal Data for the following purposes:

  • to identify you;
  • to provide you a service or to send/offer you a product;
  • to communicate either for sales or invoicing;

On the ground of legitimate interest, we Process your Personal Data for the following purposes:

  • to send you personalized offers* (from us and/or our carefully selected partners);
  • to administer and analyse our client base (purchasing behaviour and history) in order to improve the quality, variety, and availability of products/ services offered/provided;
  • to conduct questionnaires concerning client satisfaction;

As long as you have not informed us otherwise, we consider offering you products/services that are similar or same to your purchasing history/browsing behaviour to be our legitimate interest.

With your consent we Process your Personal Data for the following purposes:

  • to send you newsletters and campaign offers (from us and/or our carefully selected partners);
  • for other purposes we have asked your consent for;

We Process your Personal Data in order to fulfil obligation rising from law and/or use your Personal Data for options provided by law. We reserve the right to anonymise Personal Data gathered and to use any such data. We will use data outside the scope of this Policy only when it is anonymised. We save your billing information and other information gathered about you for as long as needed for accounting purposes or other obligations deriving from law, but not longer than 1 year.

We might process your Personal Data for additional purposes that are not mentioned here, but are compatible with the original purpose for which the data was gathered. To do this, we will ensure that:

  • the link between purposes, context and nature of Personal Data is suitable for further Processing;
  • the further Processing would not harm your interests and
  • there would be appropriate safeguard for Processing.

We will inform you of any further Processing and purposes.

Who else can access your Personal Data

We do not share your Personal Data with strangers. Personal Data about you is in some cases provided to our trusted partners in order to either make providing the service to you possible or to enhance your customer experience. We share your data with:

Our processing partners:

  • facebook.com
  • google.com
  • bing.com
  • twitter.com
  • pinterest.com

Our business partners:

  • facebook.com
  • google.com
  • bing.com
  • twitter.com
  • pinterest.com

Connected third parties:

  • facebook.com
  • google.com
  • bing.com
  • twitter.com
  • pinterest.com

We only work with Processing partners who are able to ensure adequate level of protection to your Personal Data. We disclose your Personal Data to third parties or public officials when we are legally obliged to do so. We might disclose your Personal Data to third parties if you have consented to it or if there are other legal grounds for it.

How we secure your data

We do our best to keep your Personal Data safe. We use safe protocols for communication and transferring data (such as HTTPS). We use anonymising and pseudonymising where suitable. We monitor our systems for possible vulnerabilities and attacks.

Even though we try our best we can not guarantee the security of information. However, we promise to notify suitable authorities of data breaches. We will also notify you if there is a threat to your rights or interests. We will do everything we reasonably can to prevent security breaches and to assist authorities should any breaches occur.

If you have an account with us, note that you have to keep your username and password secret.

Children

We do not intend to collect or knowingly collect information from children. We do not target children with our services.

Cookies and other technologies we use

We use cookies and/or similar technologies to analyse customer behaviour, administer the website, track users’ movements, and to collect information about users. This is done in order to personalise and enhance your experience with us.

A cookie is a tiny text file stored on your computer. Cookies store information that is used to help make sites work. Only we can access the cookies created by our website. You can control your cookies at the browser level. Choosing to disable cookies may hinder your use of certain functions.

We use cookies for the following purposes:

  • Necessary cookies – these cookies are required for you to be able to use some important features on our website, such as logging in. These cookies don’t collect any personal information.
  • Functionality cookies – these cookies provide functionality that makes using our service more convenient and makes providing more personalised features possible. For example, they might remember your name and e-mail in comment forms so you don’t have to re-enter this information next time when commenting.
  • Analytics cookies – these cookies are used to track the use and performance of our website and services
  • Advertising cookies – these cookies are used to deliver advertisements that are relevant to you and to your interests. In addition, they are used to limit the number of times you see an advertisement. They are usually placed to the website by advertising networks with the website operator’s permission. These cookies remember that you have visited a website and this information is shared with other organisations such as advertisers. Often targeting or advertising cookies will be linked to site functionality provided by the other organisation.

You can remove cookies stored in your computer via your browser settings. Alternatively, you can control some 3rd party cookies by using a privacy enhancement platform such as optout.aboutads.info or youronlinechoices.com. For more information about cookies, visit allaboutcookies.org.

We use Google Analytics to measure traffic on our website. Google has their own Privacy Policy which you can review here. If you’d like to opt out of tracking by Google Analytics, visit the Google Analytics opt-out page.

Read more about cookies on our Cookie Policy

Contact Information

email: [email protected]

Changes to this Privacy Policy

We reserve the right to make change to this Privacy Policy.

You can configure your Internet browser, by changing its options, to stop accepting cookies completely or to prompt you before accepting a cookie from the website you visit. If you do not accept cookies, however, you may not be able to use all portions of the BootstrapDeive.com Websites or all functionality of the Services.

Please note that disabling these technologies may interfere with the performance and features of the Services.

You may also disable cookies on the BootstrapDeive.com Sites by modifying your settings here:

Visitor comments may be checked through an automated spam detection service.

Last Update: May 25, 2018

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?