Material Design in AngularJS

By

Siddique Hameed

03/12/2015

Philosophy...

• Material is a metaphor
• Unified visual language across devices & platforms
• Bold, graphical, intentional
• It's a 3D world we live in after all...
• Lights & shadows can mean a lot...
• Meaningful motions (transitions & animations)
• Real-world physics, authentic moving-objects & lucid transitions to create delightful UX
• Touch, voice, mouse & keyboard are all first-class input methods
• Responsive
• Accessibility & BIDI(RTL & LTR language) Support

Commercial...

The Rubberband Effect

And the Material Design was born...

• Debuted at Google I/O June 2014
• Available currently for Web & Mobile (Android Lollipop 5.0)
• More & more of Google products using the material design everyday.
  • Google I/O 2015 Website - https://events.google.com/io2015/
  • Inbox - https://www.google.com/inbox/
• Google open-sourced icon packs used in material design https://github.com/google/material-design-icons
• Design artifacts like Typography, Color palettes etc. are publicly available
• Checkout this site for some awesome inspiration - http://material.cmiscm.com/

• Polymer is Google's reference implementation of Web Components
• Polymer's Paper Elements is a reference implementation of Google's material design spec - https://www.polymer-project.org/0.5/components/paper-elements/demo.html#core-toolbar
• Angular Material is Angular's implementation of material design spec
• So, Angular Material != Polymer
• Angular 2.0 will embrace/integrate Web Components

So, what is Web Components anyway?

• Helps build custom HTML components. Remember Directives in Angular?
• HTML imports are ways to reuse HTML components in another document
• Templates. Remember using Templates in Angular?
• Shadow DOM for better functional encapsulation & isolation

• Layout heavily based on flexbox.
• Container Elements

  <div layout="row">
      <div>Left</div><div>Right</div>
  </div>
  <div layout="column">
      <div>Above</div>
      <div>Below</div>
  </div>

• Layout options like layout-margin, layout-padding, layout-fill, layout-wrap etc.
• Responsive Layouts like layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg etc.
• Kinda like Bootstrap Scaffolding

• Use flex, offset & flex-order attributes

  <div layout="row">
      <div flex="33">
          [flex="33"]
      </div>
      <div flex="66">
          [flex="66"]
      </div>
      <div flex="">
          [flex]
      </div>
  </div>

• The flex attribute value is restricted to 33, 66, and multiples of five.For example: flex="5", flex="10", flex="25", "flex="33", flex="50", flex="66", flex="75", ....

Directives, directives, directives...

• md-autocomplete
• md-button
• md-card
• md-checkbox
• md-divider
• md-tab
• md-tabs
• md-progress-circular
• md-progress-linear
• etc.

Services

• $mdBottomSheet
• $mdDialog
• $mdIcon
• $mdToast
• $mdSidenav
• etc.

Demo Time!

References

• http://www.google.com/design/spec/material-design/introduction.html
• https://material.angularjs.org/#/
• https://www.polymer-project.org/
• http://webcomponents.org/

Q & A