Learning about Material Design Components for the Web

Just one of the things I'm learning. https://github.com/hchiam/learning

https://github.com/material-components/material-components-web

CodePen quick start demo

https://codepen.io/hchiam/pen/YzyRrwQ

Quick start demo using this repo (batteries included)

npm install; npm run go

or

npm install # just once
npm run build # just once
npm start # custom config has it automatically open localhost

This repo is based on a great walk-through tutorial of install/setup steps: Getting Started. Read it for details, but here are helpful things I'd like to point out (or remind myself):

• package.json deps and webpack.config.js options

• Both CDN and NPM options are available.

• You can make webpack automatically open the (correct) localhost port in the browser:

  devServer: {
    open: true;
  }

• mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

• There's an appendix on what to do if you have nested node_modules folders caused by deps on conflicting versions of individual MDC Web packages. But actually, this fix might be broken too.

• webpack-dev-server gives us live reloading (i.e. automatically reloads the page when you save a source file that's already watched by webpack).

Intro video.

Use SCSS for easier theming.

Gallery

Intro: https://www.youtube.com/watch?v=vATjngAPc7Q

Click through prototyping: https://www.youtube.com/watch?v=mpuockxs9eo