angular material vs material design light
Post on 20-Jan-2017
860 Views
Preview:
TRANSCRIPT
Angular Material vs Material Design Light
by Michael Rumiancaŭ
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)
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
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>
Styles & Themes
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>
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
Components (~30)
<md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly"></md-chips>
Theming
Declarative syntax
Palette
Color intentions
API & Services
Similarities...
Material Design and... … Material Design
<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-”
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
… and differences
Angular Material in single-page applicationsMaterial Design Light in static content websites
<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
<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
Alternative?
Links
http://www.google.com/design/spec/
https://material.angularjs.org/
http://www.getmdl.io/
https://elements.polymer-project.org/browse?package=paper-elements
Things we do
https://github.com/flatlogic/angular-material-dashboard
http://getmdltemplates.com/
Thank you for attention!
http://micrum.me/
michael@micrum.me
top related