Hi, I just updated ionic to the latest version to try Ionic Lab http://ionicframework.com/blog/ionic-lab/. I was suprised when seeing the screenshot of Ionic Lab because the android style is becoming material design. But when I try to start new project and do
ionic serve --lab
, the android style is not fully using material design and the tabs is still at the bottom and still in white color (at the Ionic Lab screenshot the tabs is on top and the toolbar become blue). Is there anyone knows how to activate material design for android in ionic framework http://material.angularjs.org/? Thank you.
A lot of the work to follow the material design guidelines is the nightly builds right now.
2 Likes
@mhartington
any thing in road map for Responsive Web Design ??
I think its important to have it in an app that would run cross platform, with variation in screen resolution.
Currently we have manage separate CSS for it
Already have a few things in the framework for tablet support.
http://ionicframework.com/docs/api/directive/exposeAsideWhen/
IMO, I think something like responsive design should be up to the developer and not the framework.
A framework isn’t going to know your app well enough to provide exactly what you need.
I mean half the time if I use bootstrap, I end up ripping the grid out and using my own.
@mhartington
I am already using the exposeasidewhen large feature,
but what my concern/issue has been that when we target multiple device, with different screen size, the header bar which is 40px in height by default does look good on small screen, but when we move to large screen it looks small, for example a 40px on 400px (1/10th of the screen) is good enough, but when we go to large screen, it looks small on a full HD screen… or a 4k (i know only 1 device but that could change in future) 40px on 1080 or 1920 height (both landscape and portrait, which gives 1/27 or 1/48 )
now to counter that, when we use media query to change the height, there is another problem, has-header class would add only fixed 40px to top attribute, again we need to take care of that, now adding more and more element with default margins and positions set, we would need play around with CSSS alot, this would (At least in my opinion) would defeat the purpose of a framework, as we still need to make changes to CSS to a good extent, in not great…
I know you guys are working hard in evolving the ionic framework, but responsive design is what I would like to see in future from you guys…
In that case, you should give this a read.
So in short, in a webview (since we’re setting the viewport) you’re going to use css pixels and not devices pixels.
So it should all work out correctly if you have the right viewport.
