@custom-elements/core NPM

custom-elements

Custom Elements With Material Design

Design Principle

Less Engineering, More Standards
- Including W3C Draft Standard
- Only HTML4/HTML5/ES5/ES6/ES7CSS2/CSS3
- No Framework or Typescript
Themable
- By changing theme variables, we can have different look-and-feel

##Status Table

+........+.......+.....................................................................................
| Status | Layer | Name
+........+.......+....................................................................................
| MOBILE |  4    | App Bar
| MOBILE |  8    | Menu + nav-item
| MOBILE | 16    | Nav drawer + nav-item
| MOBILE |  0    | NavItem
| MOBILE |  8    | Bottom navigation bar
| MOBILE |  2    | Card (resting elevation)
| MOBILE |  8    | Card (when picked up)
| MOBILE |  2    | Raised button (resting elevation)
| MOBILE |  6    | Floating action button (FAB - resting elevation)
| MOBILE | 12    | Floating action button (FAB - pressed)
| MOBILE | 24    | Dialog
| MOBILE |  3    | Refresh indicator
| MOBILE |  0    | Tabs
| MOBILE |  0    | Text Field
| MOBILE |  0    | Chip
| MOBILE |  25   |  tooltip
| MOBILE |  0    | icon
| MOBILE |  0    | radio
| MOBILE |  0    | checkbox
| MOBILE |  0    | switch
| MOBILE |  0    | expansion panel
| MOBILE |  0    | Grid List
| MOBILE |  0    | List
|        |       |
| FUTURE | 15    | Right drawer
| FUTURE |  6    | Snackbar
| FUTURE |  9    | Sub menu (+1dp for each sub menu)
| FUTURE |       | steppers
| FUTURE |       | input type=number with masks. e.g. (416)222-3333 1,234,567
| FUTURE | 24    | Picker
| FUTURE |       | ColorPicker input type=color
| FUTURE |       | FilePicker  input type=file (with two numbers)
| FUTURE |       | DateTimePicker[date]     input type=date  onchange="formatValue()" like chrome
| FUTURE |       | DateTimePicker[month]    input type=month
| FUTURE |       | DateTimePicker[time]     input type=time
| FUTURE |       | DateTimePicker[week]     input type=week
| FUTURE |       | DateTimePicker[datetime] input type=datetime-local
| FUTURE |       | slider
|        |       |
| ?????? | 16    | Modal bottom Sheet
| ?????? |  2    | Quick entry / Search bar (resting elevation)
| ?????? |  3    | Quick entry / Search bar (scrolled state)
+........+.......+...................................................................................

FlexBox Examples http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview

tiny color http://plnkr.co/edit/e5eYGKLrg9SUXiGSvAgZ?p=preview