Hi Ionic team,
This week google annouced new android L with new design guidelines : material design ( http://www.google.com/design/ )
I’m very happy of this and I really like this new design.
So, I was wandering if there is a chance to integrate material design in Ionic. It could be a huge benefit for all apps in android.
There is already some web implementations with Polymer : http://www.polymer-project.org/
Thanks for your answer
It would be nice, i really want to use material design on my apps. \o/
this gonna be awesome if ionic team move their design schema to material design schema on next version
AngularJS also have a material look and feel now… https://material.angularjs.org/#/component/material.components.form
+1
I feel that including the option for components/directives that reflect the Material Design style guide would be a key asset moving forward. I found some language that states that the current CSS Components reflect a, “default design [that] is similar to iOS.” Maybe a material design alternative could manifest as a sub folder within the /scss folder? So the current “iOS” styles would be moved into a new iOS folder and all forthcoming styles for Material Design would live within an Android folder?
What do you guys think?
Yeah @Zach, I think that’s the idea… Most of frameworks are just iOS wannabes, and what happens in the end? Most of companies see that they need to respect the OS experience.
Soon it will be needed a WP8 variation, later a Tizen, I know, it sounds like a endless job, actually it is, but Ionic is great, but it shouldn’t be just a HTML version of iOS.
I have to agree with @Zach
It seems that many of the frameworks out there use iOS as their design template. I’m really enjoying Ionic so far, but I’m already getting questions from clients if I’ll be moving to “material” design. Everyone wants the new. And I would think some people would like their iOS builds to be non-material looking.
Look at the commits for the material design in Github. You’ll see a lot of the Ionic team in there adding code. Looks like they are heavily involved.
Looks like ionic team and angularjs developers are working together on angular material. Checkout
https://github.com/angular/material and https://material.angularjs.org/
How to use with IONIC? Is there some example?
Check this out. I’ve also been wondering how to best address Material integration, and we have an awesome new framework in the works now: http://ionicmaterial.com/
Any confirmation if this is “official” ?, since the ionic team works together with the angular material team and the author of ionicmaterial is not related to ionic.
The Ionic guys cover this briefly on their latest show.
Ionicmaterial has very beautiful interface elements, and interesting transitions. But they seem to be self-contained transitions, on top of Ionic (ui-router) transitions. The demo is interesting. Even if the transitions from on state to another are not morphings à la material, it still looks good.
I am using Ionic to wrap angular-material based layouts, and both play pretty well together. I have to use some CSS overrides here and there, but simple/light stuff.
Thanks for the feedback.
It could be interesting if you can share a basic project with ionic & material design 
Here’s a pretty ugly-on-purpose test I did back when I was evaluating Ionic and angular-material.
Ionic is great, but I build desktop web apps as well, so this was a crude test to see if there were any major CSS conflicts between Ionic and angular-material, and how you could get a desktop web app to have indipendent scrollable areas.
Please note that this is based on the “tabs” starting template of Ionic.
It also uses old versions of both Ionic and angular-material, since I did this test months ago.
I’m currenlty working on a project based on the latest versions of both (1.0.0 and 0.9.4), and have no trouble to report so far.
I am soon releasing my first commercial project for a client, based on Ionic and angular-material (and this crude test). I will post an article about it shortly after its release. I will probably submit it to the “What are you building with Ionic” topic. Anyway, I’ll keep you posted.
In short : Nothing prevents you from using Ionic for web apps primarily intended for desktops. I find the layout system of angular-material very intuitive, and makes it very easy and fast to build entire responsive flexbox-based layouts. Ionic keeps the whole test/build/native build process. And even if on this current project I’m mentioning, I had to start with desktop screens first, Ionic provides the backbone to go down to mobile and rely on native-like UI elements. Ionic ensures the app stays an hybrid app, by allowing me to continously test the native mobile versions, even if the templates are not mobile-optimized yet.
My ugly demo is a good stress test for angular-material responsivity : shrink the width to the max and see the form in the center column : the form is still usable. The tabs in the left column as well.
I don’t think it’s a bad practice to rely on custom CSS overrides when you deal with a CSS framework. You just have to be careful to see what requires an override, and what can be extended instead. If the framework does not display what you have in mind, bend the framework to your will. Just make sure your docs explain the tricks you use in detail.
This may lead to broken code with a major framework’s update, but I’d rather work with a good custom “meta-framework” that needs repairing from time to time, instead of using a framework straight out of the box, and see the web flooded with Bootstrap 3 clones.
I know we’re going to see a lot of material-inspired apps and sites in the next months, I just hope it won’t be bad as Bootstrap was, and still is for visual creativity. The good thing with Material Design, is that its “less-is-more” philosophy helps you strip unneccessary elements from the UI.
The major caveat I have seen circulating, is about conflicting tap events between the 2 librairies. But you’ll find workarounds on Github issues, AM Google Group, and, of course, right here.
I managed to make some apps with https://github.com/zachfitz/Ionic-Material this is still in development but still its too good.