Introducing Material Design Lite

Introducing Material Design Lite

Want to add material design look to your website?
Don’t worry Google hai na….! Google has launched Material Design Lite to give static websites a quick way to adopt their material design mantra.

Material Design Lite (MDL) is a library of components for web developers based on Google’s Material Design Philosophy: “A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.”

Last year Google introduced Material Design, and now around a year later it has introduced Material Design Lite, a web framework for bringing the design language to the Web.
Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

The new framework includes components such as buttons, checkboxes, input fields, custom typography, etc. It additionally incorporates responsive grids and breakpoints that adhere to Material Design adaptive UI guidelines.
MDL includes Guidelines for how website utilizing Material Design reflows content at different screen sizes and as a screen resizes progressively make for visual consistency across a range of devices of all shapes and sizes.

“Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. “

HOW DO I USE MATERIAL DESIGN LITE?
A code implementation of Material Design (MD), Material Design Lite (MDL) is a small (around 27Kb gzipped) library of components for use on web pages and web apps.
It can be download from github then modified for your own purposes. Or you can, as per Google’s stated preference, import the full framework from Google’s CDN.
You can easily-pick elements to integrate with your designs, or if you are looking for a really simple option, Google have provided a theme customizer which allows you to make (very) minor changes to the framework before you use it.

WHAT’S INCLUDED IN MATERIAL DESIGN LITE?
MDL’s component library features MD versions of common UI elements such as check boxes, text input fields, and buttons. There are also MD UI elements such as cards, sliders, spinners, and tabs.
MDL also includes templates: a blog, a dashboard, a text-heavy web page, and a standalone article page

template-1

template-2

template-3

BROWSER SUPPORT FOR MATERIAL DESIGN LITE
MDL will,work in “modern evergreen browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari”.
MDL has been optimized to support content heavy sites. Its core aims are browser portability, device independence, and graceful degradation. The first two aims are in line with responsive design best practices, and although graceful degradation has been supplanted by progressive enhancement in the last few years, legacy support means graceful degradation is an important feature.

SHOULD YOU USE MATERIAL DESIGN LITE?
MDL is the way that Google thinks the majority of websites should be built. And whilst there is absolutely no suggestion that Google will enforce this way of building, they certainly could if they chose to; Google wants to ensure that search results it serves to customers are fast, clean, user-friendly pages.

Now we have another player(MDL) in design field with Bootsrap….:)

stay tuned will come up with new evolving technologies……

2018-12-31T12:36:29+00:00
WhatsApp WhatsApp us