At the Google I/O Conference back in 2014, Google announced Material Design, their new design language. They have since converted much of their popular applications to adhere to this new spec in an effort to provide a consistent experience. Now they are trying to convince you to follow along as well.
 |
| Source| www.toptal.com |
What is Material Design?
Goal
Principles
Material Design is founded on three principles.Material Is the Metaphor
Inspired by the study of paper and ink, the material lives in 3D space and is grounded in tactile reality. It gives the illusion of space by using realistic shadows. The paper material must abide by the laws of physics (i.e. two pieces of paper may not travel through each other), but may supercede the physical world (i.e. a paper may grow or shrink).Bold, Graphic, Intentional
Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. The Floating Action Button, or FAB, is a prime example of this principle. Have you noticed that little circle with the ‘plus’ symbol floating around in your Google Inbox app? Material Design makes it very apparent that this is an important button.Motion Provides Meaning
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. The main point here is to animate only when it has a purpose and not to overdo it.How does AngularJS fit into Material Design?
AngularJS, Google’s “Superheroic JavaScript MVW Framework”, addresses many of the challenges encountered in developing single-page applications (SPA). It provides the framework needed for creating modern web applications that connect to APIs and never need the page to be refreshed.AngularJS: A New Approach
Angular is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents, but creating dynamic applications not so much.Creating dynamic applications with HTML has always been an exercise in tricking the browser into doing things it wasn’t meant to do. There are a couple of approaches to doing this.
- Library - a collection of functions. (jQuery)
- Framework - code dynamically fills in static elements when needed. (Durandal, Ember)
Wouldn’t it be neat if Google created a set of directives based on Material Design principles?
Introducing Angular Material
Google is actively developing Angular Material, an implementation of Material Design in AngularJS. Angular Material provides a set of reusable UI components based on the Material Design system. Angular Material is composed of several pieces. It has a CSS library for typography and other elements, it provides an interesting JavaScript approach for theming, and its responsive layout uses a flex grid. But the most appealing feature of Angular Material is its amazing collection of directives.Getting Started
I have created an open source project to help jumpstart your next Angular Material project. The purpose of this project is to give an example of everything Angular Material has to offer, all under one roof. Navigation, paging, theming, and the entire collection of directives are ready to go, all you have to do is feed in your data and bind it to the HTML.Take a look at the demo here or fork the code on GitHub.
Directives
Directives are a core Angular feature. Angular comes with several directives that you use all of the time like ng-model or ng-repeat. They are a very important piece of Angular that makes the framework function as it should.How to Use an Angular Material Directive
Angular Material extends this directive library with a set of beautiful Material Design inspired directives. Angular Material directives are HTML tags that begin with ‘md’; short for Material Design. They couldn’t be much easier to use. For example, let’s take a look at the good old button.A standard HTML button might look something like this.
<button>Click Me</button> An Angular Material button looks like this.
<md-button>Click Me</md-button>And this is all that is needed to make a Material button. Now, there are several other options that are available for this directive such as theming it and raising it from the surface to imply importance.
<md-button class="md-raised md-primary md-hue-1">Click Me</md-button>Services
Services are also core to Angular functionality. They are used to share code across the application. A common core service like $http is used and reused for data calls in Angular applications.Angular services are:
- Lazily instantiated – Angular only instantiates a service when an application component depends on it.
- Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
How to Use an Angular Material Service
Angular Material comes packaged with some services that provide some extra functionality to the application. They also contribute to the performance of some of the directives. A great example of a service is the ‘toast’. |
| Source| www.toptal.com |
In JavaScript,
$mdToast.show(
$mdToast.simple('Simple Toast!')
.position('left bottom')
.hideDelay(3000)
);This example shows a simple toast that pops up on the bottom left of the screen and retreats after 3 seconds.
Some services can be personalized with custom templates. In this case, the $mdToast service can use a custom HTML template by using the md-toast directive.
Theming
Material Design is a visual language where themes convey meaning through color, tones, and contrast. These themes are expressed throughout the components in the entire application to provide a more unified feel. |
| Source | www.toptal.com |
- Hue: A hue is a single color in a palette.
- Palette: A palette is a collection of hues.
Source | www.total.com
0 Comments