Google Promotes Material Components Out of Preview Phase
For the past month, there’s been quite a lot of activity on Google’s Material Components GitHub page. In addition, Google updated the material.io section on Material Components with demos and documentation. Finally, Material Components are out of the preview phase.
Material Components are Google’s take on promoting a unified approach to Material Design. Also, known as MDC-Web, Material Components will allow developers to build, develop and design apps and web experiences that follow Google’s Material Design guidelines.
Material Components for Android
Android developers familiar with Design Support Library for Android or Material Design Lite for the web, will benefit from the improved codebase and modularity of the associated components without having to significantly alter their development architecture or switch tools.
Material Components for iOS
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther ProductsWith Material Components, Google also targets iOS developers, by allowing them to use official Material Design Components, written in native code. They’ll just have to find a way to incorporate Material Design metaphors into Apple’s rigid guidelines.
- Google: “In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity…”
- Apple’s: “Don’t use animation for the sake of using animation…”
Material Components for the Web
For web developers, Material Components bring seamless integrations with libraries such as react, AngularJS, VueJS, etc., production-ready components and great performance. Evolved from Polymer, and subsequently, from Material Design Lite, MDC-Web provides components that are agnostic, lightweight and easy to use.
Test-Drive MDC-Web
Material Design Components are designed with modularity in mind. With 19 available components such as Animation, Buttons, Drawers, Layout Grids, Ripples, developers can install the complete library by running:
npm install --save material-components-web
Or install specific components:
npm install --save @material/button @material/card @material/textfield @material/typography
There is a quick start guide for web developers here.
To run the demos, one can setup a repo by cloning the GitHub repository and run the development server from demos/.
Are the Components of the Future Material?
While at its core, MDC-Web is a centralized repository, curated by a select team of engineers and UX engineers, Google invites anyone to contribute or fork the project on GitHub.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther Products
Google promises to keep components in line with the latest updates to Material Design, including aspects such as internationalization or accessibility support.
MDC-Web is officially supported on Chrome/Chrome on Android, Safari, Firefox, Edge, Opera, Mobile Safari, with Google promising to keep support going for the last two iterations of each browser.
Google’s quest to unify motion with spatial location just got more exciting. However, will Material Components live up to expectations? It’s up to developers to decide.
