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.