Material Design CSS/JS shared between Angular 2 app and static html page

Question

Our Angular 2 app uses the Material Design framework. The app will end up as a locally served (serverless) web app on a piece of embedded software. For performance we have found it imperative to use non-Angular static html in certain situations due to load time for a couple places in the app.

I want our UI/UX programmer to be able to use as many of the md- prefixed components and CSS/JS animations within the static html pages. In other words I want them to be able to code the UI on a static page just as they would code it within an Angular 2 template, or as close to the same as possible.

I would also like changes or any customization that they make to the CSS or JS to be shared between the Angular 2 templates and the static html pages, as they should have the same look and feel and should look like they are part of the same app.

I know there are various ways to implement material design without Angular 2. (bootstrap, polymer, etc.) Does anyone know of a clean way that would make coding seamless between the Angular 2 and non-Angular portions of the web app?

Answer 1

From what I can tell, there are several implementations of material design ( https://material.io/guidelines/ ) for various frameworks available. The following which can be used on a static html page without requiring an all-encompassing framework such as Angular 2:

• https://elements.polymer-project.org/elements/paper-material
• http://mdbootstrap.com/
• http://materializecss.com/

...just to name a few. The one we decided on was the Polymer implementation. This is because the polymer syntax is very similar to the angular one. (both authored by google) Polymer prefixes with 'paper-' instead of 'md-' but otherwise is very similar and we can add both of these prefixes to any overrides in our .scss files which can be shared between the angular templates and the static html files when we need to override the default styles.

Although it is not ideal to manage to separate material design implementations, given that we require static html files for certain pages in our app it is an acceptable trade off.

Still interested in other solutions to this problem if anyone has any other ideas.