Awesome
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):
-
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).
Use SCSS for easier theming.
Gallery
Intro: https://www.youtube.com/watch?v=vATjngAPc7Q
Click through prototyping: https://www.youtube.com/watch?v=mpuockxs9eo