Flat Style theme. How?


#1

I wish to use a flat style theme on my app. How to add a theme style like these? Which is the better compatible with ionic?

Thanks.


#2

You can customize the scss files that come with ionic by following our tutorial.

This way, you can write your own theme to fit your own needs.


#3

Can I start from someone of them? Is there a theme that we can use from a starting point or can we use css overloading?


#4

Your best bet is to go look through the scss files, mostly the _variables.scss file. This has all the variables that set up most of the color classes.

https://github.com/driftyco/ionic/blob/master/scss/_variables.scss

This should get you started. A quick and easy way to start is to copy a preexisting color variable and modify it to your needs.


#5

Thanks. Is there a guideline to sass compiling? I’ve never used it.


#6

Check out the scss website.

http://sass-lang.com


#7

For example.
Do I need to use only CSS or I need to import js file too if I want use some UI CSS kit like UIKit ( http://www.getuikit.com/ ) or other like BootFlat ( http://bootflat.github.io/documentation.html Bootstrape based )?

That is my simple question is: How to start Ionic app theming from an UI Kit or framework?


#8

Remember, Ionic is just HTML,CSS, and JS. If you have particular styles that you want to incorporate into ionic, then you can write some css and create your own classes. Think customizing bootstrap. If you have a build process, you can incorporate ionic’s scss files and go from there.


#9

Ok…In the next days , I’ll post some screen…but I need to understand how I use sass


#10

If you’re creating project using the ionic CLI, you should have scss file already included. There you can write your own styles and theme then run gulp sass or gulp watch to compile the scss into css


#11

Frankly, I wish there was an Android theme - Ionic apps look like iOS 7 apps on an Android device. Android needs some love too. Ideally there would be a per-platform option to swap out themes when an app is built.


#12

Something that we are actually working on.
Less of theme-appearance thing, but changing things like animations, tabs appearance, nav-bar title align, etc


#13

Your link does not work


#14

Which link, http://sass-lang.com/ ?


#15

#16

Perhaps http://learn.ionicframework.com/formulas/working-with-sass/ ?


#17

@biapar
Try this project I created: https://github.com/matheusrocha89/ionic-flat-colors