Google Brings Material Design to Content Sites With Material Design Lite

Material DesignMaterial Design Lite is a web framework more suitable for blogs, news sites, and business sites than its app-focused big brother.

Front-end developers have no shortage of frameworks to choose from. Bootstrap is hugely popular, as is Foundation, and sometimes it seems as if every front-end developer with the coding chops has a swing at building their own. But, there’s always room for one more, especially when it comes with the imprimatur of a company like Google.

Google was never known for its design abilities. It was often seen as an engineering-centered company more focused on developing cloud services than maintaining a coherent design language across its web products. All that changed with Material Design, Google’s card-based user interface paradigm which is seen right across the company’s product range from Google Plus to recent versions of Android.

Material Design is great for app developers, but it’s mainly intended for use in applications and data-rich sites, leaving web designers of content sites out in the cold. With the release of Material Design Lite, designers and front-end developers get a new framework that will allow them to create content sites using Google’s design language.

Getting Started

The “Lite” in Material Design Lite doesn’t imply that it’s lacking in features, rather that MDL is designed to be as small as possible — Gzipped the whole framework is only 27KB. MDL is built with standard web technologies — HTML, CSS, and JavaScript — and is designed to be workflow agnostic so it can be easily integrated with existing toolchains.

Material Design Lite is a library of components that implement Material Design’s cards-within-containers paradigm. Of course, it includes a responsive grid which provides the containers within which cards and other content are displayed. Among the other available components are badges, navigation menus, buttons, toggles, tables, and text fields. MDL also includes the Material Design set of image and font icons.

MDL has some customization features. You can customize the CSS to your heart’s content, but the website also offers color customization based on an interactive color wheel.

Color

And finally, Google has made available a range of templates that show how MDL can be used on content sites. As you might expect, there’s a blog template — which to my eye doesn’t look especially appealing, but it’s a good showcase of what can be done with MDL. There’s also an article template, a dashboard template, and an example site template based on the current android.com site.

Template

If you want to play with MDL, you can download it directly from the site, but the easiest way is probably to grab it with Bower. If you’re not familiar with Bower, it’s a package manager for front-end development components. You can find our quick Bower tutorial here.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED