Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Google Materialize Responsive HTML Framework

In this article we will see how to implement the new Material Design patterns to the web universe with Google Materialize Responsive HTML Framework.

Materialize happens to be a Responsive CSS Framework that is pretty much based on Material Design Concepts by Google. As such, the main idea behind Materialize is to bring material design to the web, which has been a very popular aspect in terms of Google’s design for Android.

In this tutorial, we shall initially take you through what material design actually is and then go on to construct a home page for a blog by using Materialize.

A Design Language – What is it?

Any specific style that is the basis for the design of a range of products can be termed as a design language. As such, when designers wish to offer a certain unique and yet, consistent look to a specific range of products, try and define a design language to go with it. A design language offers plenty of aspects such as color schemes, materials, shapes, patterns, layouts, textures etc.

Google’s Material Design – A new approach to the design world

Material Design is one among the several different design languages that exist, such as Metro Design, Flat Design, Realism Design, etc. However, Material Design fairly differs when you compare it to the others on various aspects like shapes, colors, typography, layout etc. Also, Material Design adds two very important elements to the overall design stacking and motion.

With Material Design, one is capable of adding properties as weight and motion to the design aspects. Hence, it portrays a story.

A complete guide can be largely helpful in this regard and can be obtained through Google’s official documentation on Material Design.

Getting started

As per the official website, “A modern responsive front-end framework based on Material Design” is what Materialize has been termed as. So basically, it is very much like many other CSS Frameworks that are currently available like Foundation, Bootstrap etc.

It comes off as being based on a responsive grid system, and thus, it is also suitable for building websites for any kind of device.

Let us build something

A simple responsive design for a blog is what we will create using Materialize. You can try resizing your browser and further, you can try interacting with different elements to see their motion.

Download the script and set up the project

One can visit the Materialize Download Page to obtain CSS, Fonts and JS files. Now, create an index.html file and a css/style.css file. Also, create an image directory, where the images that are going to be used in our project, shall be kept.

The project directory should look something like

 css
 --materialize.min.css
 --style.css
  js
 --materialize.min.js   
  font
 --material-design-icons
 --roboto
 --images
 index.html
  

The Basic Template

The starting code for the index.html file is given below. We are basically loading the Materialize CSS, the JS library along with the custom style.css file.

Listing 1: A simple basic template

  <html>
      <head>
         <title>Materialize CSS Framework Demo</title>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
         <link type="text/css" rel="stylesheet" href="css/style.css">
      </head>
 <body>
 
 <!-- jQuery is required by Materialize to function. -->
 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="js/materialize.min.js"></script>
 <script type="text/javascript">
 //custom JS code
 </script>
 </body>
 </html>  
  

Creation of the Navigation Bar

The code here displays the navigation, in which the menu items are placed to the right, with the logo being placed to the left.

Listing 2: A simple navigation sample code

 <nav>
  <div class="nav-wrapper z-depth-1">
  <div class="container">
  <div class="col s12 m12 l12">
   <a href="#!" class="brand-logo">Mrbool</a>
    <ul class="side-nav">
  <li><a href="#"><i class="mdi-action-perm-contact-cal left"></i>Contact Mrbool</a></li>
  <li><a href="#"><i class="mdi-action-view-module left"></i>Home Mrbool</a></li>
  </ul>
  </div>
  </div>
  </div>
  </nav>
 

Sample screen shot is attached below.

Figure 1 – Sample navigation bar

An icon is being displayed on left of every menu item so as to give the navigation bar more meaning and also make it engaging. If you wish to see the complete list of all support icon classes, you can find them at Materialize Icons Docs.

We should also keep a certain vertical space between the navigation bar and the body content and hence, you can place this code in the style.css file.

 nav
 {
 margin-bottom: 35px;
 }
 

Materialize Grid

Materialize makes use of a standard 12 column fluid responsive grid system, which enables you to easily lay out your page in an ordered manner.

The .container class isn’t a part of the grid, but nevertheless important, since it comes across as important when laying out content. Being set to about 70 percent of the window’s width, it allows the centering of your page content. Here, we shall use it in a similar fashion and center the content.

We can also makes use of .s, .m and .l =, in order to define specific layouts for viewport sizes, which are small, medium and large.

The code for the body layout is given below.

Listing 3: A sample body layout

 <div class="col s12 m8 l8">
  <div class="post-index z-depth-1">
  <h5>Learn CSS3 </h5>
  <h6>08/04/2015</h6>
  <img class="responsive-img materialboxed" data-caption="CSS3 Image" src="images/css3.png" />
  <p>Learning CSS is great experience.</p>
  </div>
  <div class="post-index z-depth-1">
  <h5>Learn HTML5 </h5>
  <h6>08/05/2015</h6>
  <img class="responsive-img materialboxed" data-caption="HTML5 Image" src="images/html5.png" />
  <p>Learning HTML5 is a great experience</p>
  </div>
         <div class="post-index z-depth-1">
  <h5>Learn WordPress</h5>
  <h6>08/09/2015</h6>
  <img class="responsive-img materialboxed" data-caption="WordPress Image" src="images/wordpress.png" />
  <p>Learning WP is a fun</p>
  </div>
  </div>
 

Figure 2 – Sample body layout

On small screens, we usually stack posts and widgets, and on larger screens, we lay them out horizontally.

Index for posts

Every post in the index usually has a heading, image, date and excerpt. Materialize offers readymade classes that can be used to style these elements.

 <div class="post-index z-depth-1">
     <h5>Learn HTML5 </h5>
     <h6>08/05/2015</h6><img class="responsive-img materialboxed" data-caption="HTML5 Image" src="images/html5.png" />
     <p>Learning HTML5 is a great experience</p>
  </div>
 

The responsive-img class on the img tag allows the image to be responsive and the materialboxed class allows it to zoom on click. The image displayed when the image is zoomed is data-caption.

You will also need to initialize it using JavaScript, if you want the image zoom to work.

 $(document).ready(function(){
 $('.materialboxed').materialbox();
 });
 

z-index-1 is to provide Material Design stacking to each of the posts. Here is some custom CSS that will allow you to leave certain space and also offer finishing to the post items. Put this in the style.css file.

Listing 3: A sample CSS file

 .post-index
 {
 background-color: grey;
 margin-bottom: 36px;
 }
 .post-index h5
 {
 padding-left: 16px;
 padding-right: 16px;
 padding-top: 16px;
 padding-bottom: 4px;
 margin: 2px;
 }
 .post-index h6
 {
 opacity: 0.8;
 padding-left: 16px;
 padding-right: 16px;
 padding-bottom: 16px;
 }
 .post-index p
 {
 padding-left: 16px;
 padding-right: 16px;
 padding-bottom: 16px;
 }
 

Widgets

We will look to display widgets in the second column on the sidebar. Here is the code for a single widget wrapper –

 <div class="widget-item z-depth-1">
 <b> Insert title of widget</b>
 <div>
 Insert Body
 </div>
 </div>
 

Again, we have some custom CSS for providing space between elements and finishing to widgets. You can place this too, in the .css file.

 .widget-item
 {
 background-color: grey;
 margin-bottom: 38px;
 padding-top: 16px;
 padding-bottom: 16px;
 padding-left: 16px;
 padding-right: 16px;
 }
 .widget-item b
 {
 display: block;
 margin-bottom: 16px;
 }
 

Forms using Materialize

Form elements can be styled by making use of CSS classes which are provided by Materialize. The code for a “Sign In” form is given below.

Listing 4: A sample form

 <div class="widget-item z-depth-1">
  <b>Please sign In</b>
  <div>
  <div class="row">
  <form class="col s12">
  <div class="row">
  <div class="input-field col s12">
  <i class="mdi-action-account-circle prefix"></i>
  <input id="username" type="text" class="validate">
  <label for="username">Enter Username</label>
  </div>
  <div class="input-field col s12">
  <i class="mdi-action-https prefix"></i>
  <input id="password" type="text" class="validate">
  <label for="password">Enter Password</label>
  </div>
  <button class="btn waves-effect waves-light" type="submit">Login Please<i class="mdi-action-lock-open right"></i></button>
  </div>
  </form>
  </div>
  </div>
  </div>
  

Figure 3 – Sample form section

Materialize Badges and Collections

List of anchor tags that are displayed vertically are called Collections. On the other hand, text that are displayed on the extreme right of anchor tags are known as badges.

Here is the code for such a widget –

Listing 5: A sample category navigation bar

 <div class="widget-item z-depth-1">
  <b>Content Categories</b>
  <div>
  <ul class="collection">
  <a href="#!" class="collection-item">HTML5<span class="badge">6</span></a>
  <a href="#!" class="collection-item">CSS3<span class="badge">17</span></a>
  <a href="#!" class="collection-item">JavaScript<span class="badge">19</span></a>
  <a href="#!" class="collection-item">PHP<span class="badge">22</span></a>
  <a href="#!" class="collection-item">Android<span class="badge">90</span></a>
  <a href="#!" class="collection-item">Hadoop<span class="badge">34</span></a>
  </ul>
  </div>
  </div>
 

Figure 4 – Sample category side bar

Footer

There are many different classes that can be used to develop an attractive looking footer and they are provided by Materialize. Here is the code for a simple copyright text on the left, and for a link on the right.

 <footer>
  <div class="footer-copyright">
  <div class="container">
  © 2015 Copyright Mrbool
  <a class="grey-text text-lighten-4 right" href="#!">About Us</a>
  </div>
  </div>
  </footer>
 

Figure 5 – Sample footer

Toasts

Materialize offers a very simple and easy way by which you can send alerts to your users. Toasts are sized and placed in a responsive manner.

Using JavaScript, we can easily display Toasts.

 //Content & duration of toast
 toast('New', 6000);
 

Other features by Materialize

There are several other features that are offered by Materialize in the form of CSS classes, such as tables, pre-loaders, buttons, etc. Modals, drop downs, parallax and tabbed navigation is also possible with the help of JavaScript APIs.

Conclusion

Materialize is a great means to redo your old website or design a new one for the first time. As such, there are very few sites that use Material Design, and in doing so you are bound to stand out among the crowd. Hybrid mobile apps can also be designed using the Materialize framework.


Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login