Discussion for demo site re: starter templates

[amsheehan]

Opening this issue as a forum to discuss questions, concerns, and requests for a possible future demo page. Please be constructive and polite to the community, and remember—there is no judgement in brainstorming. 👍

[berets76]

I totally agree with @jonboj about the need of a place where I can search for single component and that allows me to focus my attention on it without useless tinsel.

On the other hand, however, another very useful function, IMHO, could be a "section" with some templates, like getmdl.io, to create a kind of "Getting started", useful even to understand how to use some components, like layout-grid , in more complex situations.

My two cents =)

[yeelan0319]

That's definitely a good suggestion to help improve the demo site.
Are there any specific templates that you are looking for? Maybe something that you can use out-of-the-box or help you understand mdc-web better? Let us know!

[berets76]

Basically I think that some "classic" dashboard variants could be a great starting point, with an high components coverage, either to start a new project and as study material: dashboard caput mundi.

Including material icons in those templates could be a plus.

[jonboj]

The getmdl.io page looks good. I like https://getmdl.io/components/index.html, the CodePen examples are a boost, they are selfcontained and easy to port into own environment. Haven't worked with getmdl.io, so maybe obvious after a while, but to me great with a clear relation between examples in CodePen and corresponding version in github.

E.g. for Menu

In components https://getmdl.io/components/index.html#menus-section
Codpen snippet statets version 1.3.0 of mdl, derived from the include
so demos here https://github.com/google/material-design-lite/tree/v1.3.0/src/menu/snippets

Easy to loose the overview in the Polymer elements catalog https://www.webcomponents.org/author/PolymerElements

In Polymer where the element version is individual, more need for stating the version, like
https://www.webcomponents.org/element/PolymerElements/iron-form
For getmdl.io all components have same version 1.3.0, so no need to specify for each component.

My cherrypicking/pros from the two. getmdl.io components catalog : overview, selfcontained, easy to port demos, codepen. Polymer elements catalog: transparent relation to demo code in github.

[eduardoinnorway]

I have tried both Storybook and Styleguidist to display our components to the developers, and Styleguidist came on top. It just works as expected and much more with very little code and is very easy to configure and style to look your own, I suggest you take a look at it, https://github.com/styleguidist/react-styleguidist

[ronnievsmith]

Here's a starter template (all-in-one HTML file) vanilla JS,CSS,HTML - specific to firebase. Demo https://abracadabra-8012b.firebaseapp.com and Repo https://github.com/rhroyston/firebase-v4-auth.

[amsheehan]

Thanks to everyone for participating. Moving forward we are going to solicit the community for links to viable projects that demonstrate the correct way to use MDC Web within a given framework. If anyone would like to participate, please open a pull request adding a link to the project in the README.md file. Thanks!

[ronnievsmith]

For vanilla web deployments, below is all you need.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="//unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

NOTE: instead of leaving //unpkg.com in the CSS and JS links, simply copy and paste each link into your browser and save the result so as to serve your own and not rely on the unpkg web service. In other words you would end up with something like below.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="my-copy-of-material-components-web.min.css">
<script src="my-copy-of-material-components-web.min.js"></script>

Include the following line of code in your javascript:
window.mdc.autoInit();

Add the typography class to your body <body class="mdc-typography">.

Then, follow the "Automatic Instantiation" instructions to use the various components that you wish. These instructions are found on github under the material-components-web/packages/ path.