Google is looking to expand its Material Design philosophy around the Web, introducing a free Material Design website builder for those wanting to implement the flat colors and card-based design into their websites.

The tool is called Material Design Lite, and it is compatible with almost any front-end solution a Web developer might be using, basically taking the Material Design standard and applying it to HTML, CSS and Javascript.

"The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct Web pages and Web apps that are attractive, consistent, and functional," says Google on the Material Design Lite website. "Pages developed with MDL will adhere to modern Web design principles like browser portability, device independence, and graceful degradation."

Beyond making a website that looks nice, there are advantages to building a site that uses the design vision of Google's engineers and design team. The design offers end-users a familiar look, helping them navigate the website quickly and easily. This is very important for Web developers, largely because of the fact that users who cannot easily navigate a website are much more likely to leave the website and not come back. Of course, while many Web developers are able to find great ways to navigate websites, those who are a little newer to Web development could benefit greatly from the tool.

Of course, some argue that Google is taking things a step further, essentially hoping that its branding is found throughout the Web. This isn't necessarily a bad thing for those who are not Google, but it is something to be aware of. While the tool is very nice and is free, it really is more beneficial to Google.

The tool offers code for buttons, text-fields, spinners and so on. It also offers responsive grids and the same breakpoints found on other Google websites for different sized screens. According to Google, MDL works best on "modern evergreen browsers" such as Chrome, Firefox, Safari and Microsoft's upcoming Edge browser.

MDL also offers Paper elements, which basically means that developers can pick and choose what they want, using snippets of code that are Material Design if building a whole website from a Material Design template isn't what that developer needs at the time.

Of course, Google prefers to deliver the code through its content delivery network, however, it is also offering the code on GitHub for those who want to get it that way.

Via: Gizmodo