Web Design Magazine | News, Tips, Blogs, Articles & Insights

Quick Guide to Material Design Lite

Written by Pete Prestipino | Nov 30, 2017 6:00:00 AM
Looking for a new approach to your digital design? You've just stumble-clicked upon it. 

Material Design Lite (MDL) is a library of components based on Google's Material Design philosophy and it could very much change how creative assets are designed on the Web (and in apps). 

MDL lets developers and designers add a Material Design aesthetic ( Material Design is a visual language used by Google that merges the latest technology with the classic principles of "good" design) to their websites. 

Perhaps the best part of MDL is that it does not rely on any JavaScript frameworks. MDL is ideal for those looking to optimize cross-device use, degrade gracefully on older browsers and offer a more accessible experience in general. 

MDL components are created with CSS, JavaScript and HTML, which are used to construct both Web pages and Web apps. 

Pages developed with MDL adhere to modern Web design principles like browser portability, device independence and graceful degradation. 

The MDL component library includes new versions of common UI (user interface) controls such as buttons, check boxes and text fields as well as enhanced and specialized features like cards, column layouts, sliders, spinners, tabs and more. 

MDL provides a lightweight and basic set of MD components and templates for websites. While the project does not provide actual structures to answer all UX needs, it does offer a low-friction implementation out of the box that is easy to build on. 

One of the best reasons to use MDL is that it is relatively easy to use - just include the master CSS and JavaScript files within the HTML pages of your project. These files can be hosted on Google's CDN, or, if customization is needed, they can also be downloaded and hosted on your own. 

Once the master files are in place, designers and developers can set to work actually creating pages and implementing the various available components like buttons, card containers, sliders, tables, menus, etc. All MDL elements can be modified by adding CSS classes so it is very easy to change the style of any element quickly and easily. 

MDL is really best suited for designers and developers who know their way around code, but the possible effect or end-result of a good implementation is definitely worth considering its use on more creative projects.