Angular Material

Design

Angular Material

 Material Design

What is

?

 Material Design

Polymer + Material Design

Google I/O - Summer 2014

Topeka SPA

Polymer Component Development

Material Design Paper Elements

+

=>

Polymer + Material Design

Meet the 

Angular Material

Team

Angular Material

AngularJS

Angular Material

Elements

DI

Services 

Modules

Data Binding

Standard Directives

Animations & Effects

Data-aware Components

Rich UI components

AngularJS

Component Services

 

Ink & UX Effects

ARIA support

CSS layout

Themes

SDK, Docs, Demos

AngularJS Material Design

Open-Source Library

Live, Online Docs

AngularJS Material Design

Live, Online Docs

API Documentation

Embedded Demos

Demo Source Code

Links to Specifications

Links to GitHub Repos

 

ARIA

Support for Screen Readers

Keyboard Navigation

Focus Support

 

Accessibility for Rich Internet Apps

... supported within each Angular Material component

CSS Layouts

Why create a Layout system for Angular Material ?

 

  • Flexbox-based CSS
  • Abstracts FlexBox Complexity to Attributes
  • CSS Attribute Selectors (not directives)

 

  • Horizontal and Vertical layouts
  • Mobile-first responsive design
  • Multiple Viewport Sizes

Grid and Alignment

Easy element alignments & layouts

  • Elements evenly take up space (flex)
  • Set specific sizes for each breakpoint
  • Easily align layout child elements

 

  • Sticky headers/footers
  • Vertically center

 Timeline

Beta in Q4, 2014

Angular Material

What's Next

Grids, Select, Menu, Chips, and more...

Better Swipe, Drag, and Panning

Improved Documentation

Improved Animations

More Samples

 

Sample Application demonstrates complex component interactions.

Community Participation

  • Source, Issues, and Milestones on GitHub
  • Experiment with the Components
  • File an issue
    • Clear details of the problem
    • Provide a Plunkr/CodePen sample
    • Provide a snapshot of screen 
  • Tell your friends...

Angular Material

Useful Links 

Bower Library

  • https://github.com/angular/material/
  • https://github.com/angular/bower-material
  • https://material.angularjs.org/
  • https://www.google.com/design/spec/material-design/

Angular Material

Material Specification

Online Docs

Thomas Burleson

Team Lead, Angular Material

Max Lynch

CEO, Ionic Framework

@MaxLynch

@ThomasBurleson

@ThomasBurleson

@MaxLynch

Introducing Angular Material Design

By Thomas Burleson

Introducing Angular Material Design

Let us introduce you to Angular Material Design. We will review the reasoning behind its implementation, demonstrate its features, and discuss how Angular Material will prove useful and important to your SPA development.

  • 35,638
Loading comments...

More from Thomas Burleson