Migrate to Material Design Web for plain HTML (Jquery) use

[shazada]

trafficstars

I've found MDL great for our need. We have a Java Application and as a fronted HTML & Jquery.

So MDL was the best we could have sticking to the framework we chose. No we wan't to use MDL to refactor our main application, but we see this is deprecated and we should use MDW instead according to issues here and on the Google page. https://github.com/material-components/material-components-web

So after reading this page https://material.io/develop/web/docs/migrating-from-mdl/ it's not clear if this is supported or not. Wat I'm looking for is a similar template Dashboard like MDL in MDW lik https://getmdl.io/templates/dashboard/index.html

Has anyone had the same issue like ours? And how did you go further with this.

[RaymondBakker]

You won't find the ease of installation and usage of MDL at MDCW. Switching just because Google decided to deprecate this library is questionable. You won't find the same samples like the dashboard template there either.

[shazada]

Hi Raymond it's not just Google deprecated it, it's also there is no up to date fork at the moment.

But is seems your still using it and any issues with it?

[RaymondBakker]

@shazada We're still using it mainly because switching to MDCW isn't straightforward. Ease of use and browser compatibility are our primary concerns.

MDCW has many required dependencies and a 13 page "getting started" document whereas MDL is basically 4 lines of code to start using it.

Thus far, we haven't seen any breaking issues on modern browsers. The only major issue with MDL at this point is lacking customization (as seen at Google IO this year).

However, MDL and MDCW are currently the best Material Design libraries available, so if you want or need the support there is no other option but to switch to MDCW despite it being a huge hassle.

[shazada]

Thanks for the update. That's why I didn't jump straight into MDCW because it looked complicated. I'm looking also at some bootstrap design which look familiar, like https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S There are some nice up-to-date themes. Too bad they aren't on GitHub.

[RaymondBakker]

@shazada These are interesting but not quite the same as actual Material Design. Too many differences for my taste.

If you are still planning on diving into MDCW this codepen may be of help as a way to get started: https://codepen.io/fastfoodcoding/pen/VxMpKN. If you want to skip all NPM and Webpack instructions using the Unpkg method may be the answer. This is also listed on https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md but is discouraged.

From there it should be as easy as replacing some HTML. If you built your application modularly (as you should: separation of concerns) you should be able to just change the part that generates UI elements for you and you'll be on your way to implementing MDCW, I think.

For theming something along the lines of:

	<style type="text/css">
		:root {
			--mdc-theme-primary: red;
			--mdc-theme-secondary: blue;
			--mdc-theme-background: green;
			--mdc-theme-on-primary: white;
		}
		/*
		Bug: https://github.com/material-components/material-components-web/issues/3066
		*/
		.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label
		{
			color: var(--mdc-theme-primary, #000);
		}
	</style>

https://material.io/develop/web/components/theme/

Edit: fair warning the codepen HTML is a bit outdated. Replace text fields with documentation samples. Don't forget doctype if you use it.