Angular Material Design Whats New in Angular Material Design Whats - PowerPoint PPT Presentation

What’s New in Angular Material Design

What’s New in Angular Material Design

What’s Cool in Material Design

Topics Covered

Material Design?

The Engineer’s Perspective

Digital Paper

Digital Paper

google.com/design/spec

Design consistency

Colouring your UI

mdThemeProvider

DEMO

Dynamic Colour

Cool! But how?

for now … vibrant.js

DEMO

Color Histogram

Colour Quantization

Swatch Scoring

Resources

Material Palette materialpalette.com

Vibrant.js github.com/jariz/ vibrant.js

Icons!

795 icons …

… optimized to the point of madness …

… in platform speciPc packaging …

… including an icon font!

# of Icons Font Awesome UnofPcial Material Icons OfPcial Material Icons 800 795 744 600 519 400 200 0

Font Size Font Awesome UnofPcial Material Icons (woff2) OfPcial Material Icons 60 55KB 45 44KB 36KB 30 15 0

CSS Size Font Awesome UnofPcial Material Icons (gzipped) OfPcial Material Icons 7 7KB 5.25 5KB 3.5 1.75 0.3KB 0

Why so little CSS?

because Ligatures!

&

.fa-android::before { content: ‘\E606’; } <i class=“fa fa-android”> </i>

<i class=“mi”> android </i>

<i class=“mi”> android </i>

<md-icon> android </ md-icon >

DEMO

How exactly do you pronounce &#xEB57; ?

Sorry :(

Awesome Compression Ratios!

Bytes/Icon Font Awesome Unofficial Material Icons Official Material Icons 130 124B 97.5 71B 65 47B 32.5 0

RESOURCES

Google Icon Site google.com/design/ icons

Our Github github.com/google/ material-design-icons

Material in Motion

Not There Yet …

Animation Anchoring

Animation Anchoring <!-- home.html --> <a href="#/banner-page"> <img src="./banner.jpg" ng-animate-ref="banner"> </a> <!-- banner-page.html --> <img src="./banner.jpg" ng-animate-ref="banner">

DEMO

A (Promising) Hack

DEMO #2

Thanks! Scott Hyndman shyndman@google.com