Angular material vs material design light
-
Upload
michael-rumiancau -
Category
Documents
-
view
840 -
download
2
Transcript of Angular material vs material design light
![Page 1: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/1.jpg)
Angular Material vs Material Design Light
by Michael Rumiancaŭ
![Page 2: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/2.jpg)
History
Google I/O - Material design principles (June 2014)
Android 5.0 - First implementation of MD (November 2014)
Angular Material - Release v0.9.0… (~April 2015)
Material Design Light - Release & open source v1.0.0 (July 2015)
![Page 3: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/3.jpg)
Material design Light
Vanilla CSS, HTML and JavaScript
No dependencies
Framework-agnostic library
Lightweight (~27KB gzipped)
The MDL sources are written in Sass using BEM
Chrome, Firefox, Opera, Microsoft Edge, IE 10 +, IE 9 (CSS-only)
Latest release: v1.0.6
![Page 4: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/4.jpg)
Components (~20)
<button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i></button><ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li></ul>
![Page 5: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/5.jpg)
Styles & Themes
![Page 6: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/6.jpg)
Use MDL on dynamic websites<div id="container"/><script> var button = document.createElement('button'); var textNode = document.createTextNode('Click Me!'); button.appendChild(textNode); button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect'; componentHandler.upgradeElement(button); document.getElementById('container').appendChild(button);</script>
![Page 7: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/7.jpg)
Angular Material
Angular.js
Depends on angular, angular-animate and angular-aria.
Targeted for all browsers with versions current-1
Latest release: v1.0.0-rc4
![Page 8: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/8.jpg)
Components (~30)
<md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly"></md-chips>
![Page 9: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/9.jpg)
Theming
Declarative syntax
Palette
Color intentions
![Page 10: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/10.jpg)
API & Services
![Page 11: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/11.jpg)
Similarities...
![Page 12: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/12.jpg)
Material Design and... … Material Design
![Page 13: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/13.jpg)
<md-button class="md-raised md-primary">Primary</md-button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Button</button>
Namespace “mdl-” Namespace “md-”
![Page 14: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/14.jpg)
Open source. Supported by Google,
developed in collaboration with the Material Design
team
Open source.Supported by Google,
developed in collaboration with Angular core team
![Page 15: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/15.jpg)
… and differences
![Page 16: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/16.jpg)
Angular Material in single-page applicationsMaterial Design Light in static content websites
![Page 17: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/17.jpg)
<div layout="row"> <div flex=”33”> [flex] </div> <div flex> [flex] </div> <div flex hide-sm> [flex] </div> </div>
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col">4</div> <div class="mdl-cell mdl-cell--4-col">4</div> <div class="mdl-cell mdl-cell--4-col">4</div> </div>
Bootstrap-like column grid Flex grid
![Page 18: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/18.jpg)
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1"> <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked> <span class="mdl-checkbox__label"> Checkbox </span> </label>
Native HTML elements with classes Directives
![Page 19: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/19.jpg)
Alternative?
![Page 20: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/20.jpg)
Links
http://www.google.com/design/spec/
https://material.angularjs.org/
http://www.getmdl.io/
https://elements.polymer-project.org/browse?package=paper-elements
![Page 21: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/21.jpg)
Things we do
https://github.com/flatlogic/angular-material-dashboard
http://getmdltemplates.com/
![Page 22: Angular material vs material design light](https://reader035.fdocuments.us/reader035/viewer/2022081517/58819af31a28ab0d358b7795/html5/thumbnails/22.jpg)
Thank you for attention!
http://micrum.me/