What’s New in Angular Material Design - GOTO Conference€¦ · 0 1.75 3.5 5.25 7 0.3KB 7KB 5KB...
73
What’s New in Angular Material Design
Transcript of What’s New in Angular Material Design - GOTO Conference€¦ · 0 1.75 3.5 5.25 7 0.3KB 7KB 5KB...
What’s New in
Angular Material Design
What’s New in
Angular Material Design
What’s Cool inMaterial 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
materialpalette.com
Material Palette
github.com/jariz/ vibrant.js
Vibrant.js
Icons!
795 icons…
…optimized to the point of madness…
…in platform speciPc packaging…
icon font!…including an
0
200
400
600
800
795744
519
Font AwesomeUnofPcial Material IconsOfPcial Material Icons
# of Icons
0
15
30
45
60
36KB44KB
55KB
Font AwesomeUnofPcial Material IconsOfPcial Material Icons
Font Size(woff2)
0
1.75
3.5
5.25
7
0.3KB
7KB
5KB
Font AwesomeUnofPcial Material IconsOfPcial Material Icons
CSS Size(gzipped)
Why so little CSS?
Ligatures!because
&
<i class=“fa fa-android”> </i>
.fa-android::before { content: ‘\E606’; }
<i class=“mi”>android</i>
<i class=“mi”>android</i>
<md-icon>android</md-icon>
DEMO
How exactly do you pronounce  ?
Sorry :(
Awesome Compression
Ratios!
0
32.5
65
97.5
130
47B71B
124B
Font AwesomeUnofficial Material IconsOfficial Material Icons
Bytes/Icon
RESOURCES
Google Icon Sitegoogle.com/design/
icons
Our Githubgithub.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
[email protected] Hyndman
