My First Ionic3 theme
The story began with Ionic v1
3 years ago, the product owner at my company wanted a simple application for Android and iOS and I had one month to finish it! Since I had an experience with JavaScript I chose Ionic, I thought it was the best option- and it was.
Shift your mind
This was my first step toward building my own stuff. I like my job at the company, but the other side of my didn’t like keep working for people but wanted to build my own assets and products.
*Start minding your own business. Keep your daytime job, but start buying real assets, not liabilities.
*The single most powerful asset we all have is our mind.
— Rich Dad Poor Dad by Robert T. Kiyosaki.
2018, My First Idea
I had many ideas to build on my own, but as a first step I needed to do something in short time to get the wheel running whether it succeeded or not, I chose to start with an Ionic theme.
Let’s see the theme…
Overview
The design of Neno theme is high-quality pack based on fluent design system, includes 30+ screen templates, 7 most popular categories for login/register, Store, Profile, Social, Walkthrough, All pages are using lazy loading.
Theme Structure
Menus : All menu styles inside app/app.html all menu is disabled and each on has id to activate it inside the page.
Style files
1- components styles like card, fab, menu.
2- icons contains icomoon icons declaration.
3- ionic-over that contain all overriding ionic variables .
4- theme for general theme style.
5- derived-variables where variables are calculated from the values set in the next file.
6- initial-variables where you define variables by literal value.
7- mixins declare some SASS mixins like makeIcon to generat ionic icon from other icon font library.
New Features
As you know, Ionic menus has three types: overlay, reveal and push, I used a new type called scale
What this menu type scale do? 🤔
just add the type in menu component.
<ion-menu type="scale">Demo
Here’s a demo you can try directly on your phone using Ionic View, install the app then use this id “26424fde” to see the demo directly on your phone.
Screen Shots
Finally
Please send me any feedback you find to my email or using ionic view built-in feedback system.
Theme Link: https://market.ionicframework.com/themes/neno-theme
Purchased link: https://gumroad.com/l/QBvL
Thanks for reading, Best Regards.
