However, we found that many of the web frameworks that exist are overly complicated to use, especially for a user with little to no technical experience. In addition, most frameworks lacked any of integration of successful visual design elements or components. We wanted to create a platform that not only focused on allowing users to add bold, innovative design elements into their websites, but also simplified the implementation of these elements for users with any level of technical experience.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s material design utilizes grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. The overall idea is that this new design language is based on paper and ink to allow for an improved user experience.
We believed that with Material Design being adopted across all of Google's products, Materialize would allow users to incorporate design elements into their own websites that they are familiar with but are also visually innovative.
Besides having an innovative product, our team also wanted to ensure that our users would have an easy time implementing our framework. Our website also serves as an in depth documentation to walk users through both setup and implementation of components. As you can see below, we provide users with an example of how their HTML file within their project should be setup to reference the Materialize CSS files.
To differentiate ourselves from other frameworks, we wanted to provide users with a large library of visually stunning components and elements beyond the standard features of responsive grid, typography, and color. We implemented all of our web components through HTML classes that could be easily called and also edited through syntax. Below are a couple examples of components we provide to be implemented in a user's website.
There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.
Below is an example of how users can call a flat button class in their source code. Additionally, you can see how the wave effect is being called within each button through the class attribute. Users can also easily add any of the 932 Material Design Icons we included in our library as well as reposition them with calls to position in the class.
<a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
We wanted our implemented components to provide as much visual feedback as possible to users to allow for seamless design. An example of this is through forms. The transitions and smoothness of these elements are very important because users should understand what text they are filling out and with what information. As seen below, the border should light up simply and clearly indicating which field the user is currently editing. Additionally the validate class leverages HTML5 validation and will add a valid and invalid class accordingly.
<div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix">First Name</label> </div> <div class="input-field col s6"> <i class="material-icons prefix">phone</i> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> </div> </div> </form> </div>
Parallax scrolling has become a popular way to display information through web designs. Many advocates believe it is a simple way to embrace the fluidity of a website as well as a better way to engage users to improve the overall experience of that website. We created an easy way for users to adopt a parallax scrolling layout to their site.
<div class="parallax-container"> <div class="parallax"><img src="images/parallax1.jpg"></div> </div>
Materialize has nearly 28,000 stars and 4,000 forks on Github as well as over 11,000 followers on Twitter. Our users span across a diverse network of categories ranging from personal websites to small businesses. Materialize has been mentioned in several tech new sources and blogs, as well as lists for top CSS web frameworks.
Here are some examples of what our users have done with Materialize