Building Easy Websites with MDL


If you’re a web designer in Perth, where the industry is bigger than most urban areas, you may want to get ahead of the pack in terms of applying the latest trends in web design as websites can now be designed to look more like Android apps instead of a traditional webpage.

Google has just recently announced the release of the Material Design Lite (or MDL). Using CSS, JavaScript, and HTML, the MDL brings its Material Design guidelines to the web. According to Google, it has few dependencies. This makes it easy to install and use, thus the term “Lite”. It is framework-agnostic, which means that it can be used with any front-end tool. To put it simply, you can now add Material Design components to the old looking HTML, JavaScript, and CSS. This app not only makes your websites look cleaner and better but it also makes web design a lot easier to do. For designers, it takes out a lot of hassle and time-consuming editing.

Templates and elements

Seasoned web-designers and newbies may accustom themselves to the wide library of components available in MDL like cards, different layouts, loading and menu icons, slider designs, toggles, and a lot more elements to choose from. Old and boring-looking websites and blogs will now have a more vibrant and crisp design all thanks to MDL.

If you don’t want to use the whole MDL library, MDL also uses Paper elements, which allows you to take pieces of Material Design to use if the designer is not in need of the entire design code of MDL. For example, you can add a MDL graph or table into an existing website without using other Material Design components. MDL is optimized for modern evergreen browsers like Chrome, Firefox, Opera, and Safari. It is also very useful for websites that are heavy on content such as articles and blogs.

Technical details

MDL sources, using BEM, is written in Sass. MDL sources are also downloadable at GitHub, which allows the designer to build his own version. For optimal use, Google prefers the user to reference their CDN but also allows the designer to download the CSS or to import MDL via Bowser.