Increase Font, Panel Sizes, Button Sizes etc for a Tablet

ionic-v1
1

I chose to use ionic for an app for an Android Tablet.

The UI is nice and simple, I like it. But I received the following feedback:

  • Can we increase the size of everything - The text, buttons, panels etc. Overall, since it is for a tablet, the size of everything needs to be increased, to facilitate better readability. - It looks like the current sizes are optimized for phones.

  • The color scheme needs to be changed to something much more app specific. To start with, is there a theme chooser (like the http://bootswatch.com/ for instance.)

1 Like
2

Font-size can be increase in the scss file. What you could do is create a media query that at 700px(or what ever you want) the font size increase for larger screen sizes.

For making a new theme, this is in the works for our learn site. I’m hoping to get it done soon.

3

Thanks!

Is there a Gulp task I should run after replacing the font_base_size in the www/lib/variables.scss?

The changes to the scss file doesn’t seem to reflect in the css (I’m assuming there is no auto watch by default in ionic serve?)

4

Unfortunately not yet (though it’s in the works)

Check out the instructions in the app-base repo