Styles: can we play nicely with existing pages?

[eboto]

angular-material.css declares styles upon a lot of top-level elements (e.g. html, body, *, input). This negatively affects people trying to incrementally integrate material into their existing one-page angular apps. e.g. I can't introduce material stylings to just one new angular route..

Have you put thought into namespacing those styles? so instead of selecting html you select html.md, instead of selecting body you select .md body?

With that clients could toggle material by toggling the 'md' class on one of those high-level elements.

[epelc]

I'm not entirely for this however I already switched my app over and I'm back to adding new features. But if we do this I think requiring you to set md-theme="*" on your html or body tag would be a better solution then adding .md.

[eboto]

Any solution that allows a per route toggle would work well for me. We have like 50 routes. We want to try out MD in a few and that is just impossible right now without searching the entire site for visual glitches. I imagine my group isn't the only one affected by this.

[epelc]

If your just looking to try it out I'd suggest creating a testing/experimental playground app as most of your app will be pretty broken/unusable until your pretty much finished with your conversion. Also note that if you are planning on making a switch from something like bootstrap a few elements like the select and dropdown are not yet finished. I'd recommend you take a look at the milestones though to see if the expected dates would be acceptable for what you are doing.

As a side note you could try iframing your material routes if you do want to try mixing it with something else. I did this with grafana in my app and it worked out nicely. But you would probably have problems if the two need to communicate as it'd essential be another app within your existing app.

[eboto]

I see. Yes the plan was to eventually perform a switch from bootstrap. For now though we have a small and logically siloed part of our app that we wanted to implement in material, but that seems prohibitively difficult because of this styles issue.

Interesting idea with the iframe! Based on the concerns you stated I doubt it would work for us.

[epelc]

I'd say look play around with a test app so you can get the feeling of it. Mess with $mdDialog and $mdToast if you plan to use them. Then take a look at the milestones make sure you can live with out the dropdown or select components until I think mid january. Finally the biggest concern you should have is #547 which makes form validation extremely hard if not impossible right now.

After you get used to it in an example/playground app(maybe use my example go-material to help start) and you can live with the few missing components/form validation issues just go full bore and switch over. If your coming from bootstrap it should be relatively easy its mostly a find/replace game with switching over to the flexbox layout after that I'd recommend removing all your old css to customize bootstrap. Then you can start fixing your dialogs(this is the hardest part) and redoing any custom layouts you had before. My biggest problem besides the dialog rework(which was just time consuming not really hard) was getting tables to play nicely with material which ended up with me making a class that adds all the flex class to each element in the table.

I also switched over my app(which is a pretty decent size now) from bootstrap and I started about a month ago on that. But I finished the switch about 2 weeks ago and I was fixing other things while I did it. Also the whole layout system got renamed on me a week in but it's much more stable now.

I'd really also like to recommend you play with the way layout works in material and read a bit about flexbox. This post should help you out a bit too http://css-tricks.com/snippets/css/a-guide-to-flexbox/

[EladBezalel]

@epelc 👍 very good answer and guide.

@eboto I think questions like this should be in the forum

:)

[epelc]

@EladBezalel Thanks I think the original issue is valid I just didn't agree that much and gave a mini guide to switching from bootstrap to material which I think is a better solution to the issue anyways.

@eboto maybe close this if you agree with me