angular material vs material design light

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