Materialize

Materialize is a modern, responsive, front-end web framework incorporating Google's Material Design language. Our Materialize framework allows users, ranging from non-technical to technical, to easily build and create visually stunning websites incorporating Javascript and CSS components that would be otherwise difficult to implement. Today, Materialize currently has nearly 33,000 stars and 4,000 forks on Github as well as over 11,000 followers on Twitter


The Idea

These days, more and more people are becoming involved with web design and trying to create their own web pages and websites whether it is for personal or small business use. Despite the increase in the amount of web pages being built, there is still a large amount of technical, front-end development to be done that the average user may not know or have the time to learn. Front-end web frameworks have become popular because they provide a lot of built-in features and JavaScript based functions such as responsive grids, buttons, navigation, typography, and JavaScript libraries to allow for standard web design.

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. 

Material Design

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. 


Documentation

Our team decided to create two versions of our framework,  a standard version with CSS and Javascript files and a version with source SCSS files written in Sass. The standard CSS/Javascript option requires little to no setup and is simpler for users with limited experience in Sass. Our Sass version of the framework allows for more control and personal customization, but also requires a Sass compiler.  

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.

HTML Setup

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Components

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.

 

Buttons

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>
 

Forms

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. 

form.gif
  <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

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>

Product Reach

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. 


Showcase

Here are some examples of what our users have done with Materialize