I have a feeling that CodePen is going to be absolutely filled with Material Design in the coming months. Why? Because Google have just revealed their eagerly anticipated Material Design Lite (MDL). This front-end component library allows web folk to implement Google’s Material Design specification using vanilla HTML, CSS, and JavaScript. It’s a lightweight implementation of the Material Design spec (few dependencies, low overhead, very focused) hence calling it “Lite”.
In releasing MDL, Google have answered very obvious demand. They took note of the fact that there have been efforts from the community to build Material Design-inspired frameworks, like Bootstrap Material Design, Materialize, and Material UI to name but a few. With MDL, built in tight collaboration with the Chrome UX team, Google has laid down a standard for how Material Design should be implemented on websites.
Let’s look at what MDL has brought to the table with its first release!
Material Design Components
Unlike the Polymer Material Design Elements (also known as Paper Elements) which are developed for highly interactive, data-driven websites and apps, MDL focuses primarily on websites with simpler content such as blogs, marketing and landing pages.
In this initial release, MDL comes with a handful of components, including:
Layout
The layout component features a number of building blocks for constructing pages. For example, the grid: a fundamental feature of any front-end framework. MDL’s grid is built with Flexbox and a little help from CSS’s calc(). It has twelve columns set out for large viewports, eight columns for what you might call tablet-sized viewports, and four columns for smaller viewports.
The Layout component of MDL also comprises navigation, tabs, and footers–each of which have been optimized for varying viewport sizes.
Buttons
As per Material Design principles, there are several different visual types of button, some of which being:
- Regular button: a basic rectangle button with a background distinct to the text color.
- Flat button: a button without the background.
- Material Design’s very own Float Action Button (or FAB): a circular button which floats on the interface, usually carrying primary action of the current screen or, in this case, page.
Each button can be enhanced with the familiar ripple effect.
Cards
A card is a container for displaying content, like text and images, which usually promotes some sort of action. For example, an image with a “like” or “share” button, a list of music with the “play” button, or perhaps a note with a “Save” button.
Badges
A badge is a tiny circle, positioned near a UI element, typically containing a number (perhaps to indicate new unread messages or incoming chats) or an icon. Nowadays, where information is endlessly flowing across our devices, a “badge” can be considered a very important UI element in any design.
And There’s More
Others essentials you’ll find in MDL include input fields, sliders, toggles, menus, tooltips, and Material Design icons.
Furthermore, Google also provides a couple of templates to help you get up and running quickly, with proper layout structure. There are five types of templates in this initial release:
- A blog
- An article
- An app or marketing landing page
- A dashboard
- A text-heavy webpage
Customization
MDL styles are structured with Sass and the BEM methodology. Styles can be customized in many ways, even before you download your framework package. One such way is with the color wheel on the Customize page. The color wheel allows you to select color accents based on the primary color selection. The customizer will then generate the stylesheet, which you can download, or link to directly from Google CDN.
The resultant material.min.css file is pretty small (17.6kB gzipped), but for those who need complete control in order to crunch it all down to the max, the source code is available in the Github repository.
Browser Support
Since most of the components in MDL are built with the cutting-edge web techniques, such as calc(), Flexbox, querySelector, and classList, MDL will only work perfectly in the modern evergreen browsers: Chrome, Firefox, Opera, Microsoft Edge. MDL will degrade gracefully in older browsers, such as IE9, by serving the CSS version only. The interactive elements (like the ripple effect in the button, for example) will not be present.
Saying that, the UI is still remarkably presentable in IE8. For example, take a look at the buttons and the tables element:
Final Thoughts
You’d be forgiven for thinking that we now have an additional front-end framework to put in our toolbox alongside Bootstrap and Foundation. However, MDL does not intend to replace, or to become a Bootstrap successor. Material Design is part of Google’s mission to ensure that the user interfaces, as well as the experiences in their product lineups are consistent, uniform and considered.
Let’s remind ourselves of the core idea for a moment:
“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.” – Google Material Design Introduction
So remember, while MDL fits well with Google products, it may be out of context when implemented in a website which has nothing to do with Google. However, as we have just discovered, Google provides full control over the source code, allowing us to customize it to the tiniest detail. And that’s what we are going to talk about in the next article. So, stay tuned!
Further Resources
