Brief Introduction of Materialize Framework To Make Incredible Material Design Websites
Responsive CSS frameworks have continued to remain the backbone of every successful website/app. Based on Google’s Material Design language, these CSS frameworks have overpowered some of the leading CSS frameworks available in the web world. Materialize is one such CSS framework which can be effectively used for building fully-functional websites and apps.
What you’ll find in this post?
As you read through the paragraphs included within this tutorial, you’ll get to know about the meaning of material design and the detailed process of creating a portfolio websites using Materialize- a CSS framework. Moreover, you’ll also get to know about the key points of difference between Materialize and two other popular CSS frameworks viz: Bootstrap and Foundation.
Getting Started
Material Design- Understanding its exact meaning
Material Design is basically a special type of design language which challenges to create a specific visual language that allows users to synthesize the classic principles of a good web design via unleashing the possibilities of science and technology. Unlike a range of design languages including metro design, flat design and realism design; material design comes with its unique set of shapes, layouts, color schemes and patterns. The most crucial aspect attached to material design is that it adds depth and motion to the web design elements.
A quick look at Materialize- a renowned CSS Framework
Materialize is a contemporary responsive front-end CSS framework which is based on the Material Design language. It comes with SaaS support which serves as a great add-on for faster web development. Equipped with detailed documentation and easy-to-use default styling, Materialize serves as the right tool if you’re looking ahead to create designs that need to work well on both, mobile as well as the web.
Create index.html file and add basic HTML markup in it.
Create a directory called materialize in your htdocs or in your server root folder. Now add create following list of folders (css, js ) in the materialize directory. Then download materialize framework and jQuery files and add in their respective css and js directories. Now create index.html file and include those css and js files in index.html file.
<!DOCTYPE html>
<html>
<head>
<!--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, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Now, let’s come to the steps involved in creating a portfolio website
Step 1- Create a big horizontal banner displaying your name and profession Using Materialize Framework
You can do this using Materialize text formatting tags and some small CSS code snippets as shown below:
<div class="container"> <div class="section"> <!-- Icon Section --> <div class="row"> <div class="col s12 m12"> <div class="icon-block"> <h2 class="center light-blue-text"> <i class="mdi-image-flash-on"></i> </h2> <h1 class="orange-text center">Muni</h1> <h5 class="center">Web Developer</h5> <p class="light flow-text center">Always energised to learn to new things.</p> </div> </div> </div> </div> </div>
Step 2- Design Portfolio Details Using Materialize Framework
Since your portfolio site needs to display your bio, profile and current job status; you need to create a 3-column grid. The CSS for this step is displayed below:
<div class="container about-us"> <h3>About Us</h3> <hr> <div class="row"> <div class="col s12 m6 l6"> <h6>Intro</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col s12 m3 l3"> <h4>Profile</h4> <div class="card brown-darken darken-2"> <div class="card-content blue-text"> <img src="http://lh6.googleusercontent.com/-Qg0JQmRL3HQ/AAAAAAAAAAI/AAAAAAAAAAA/fBas4iP0IgU/s150-c/photo.jpg" width="54" height="54"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> </div> <div class="card-action"> <a href="#">Anchor</a> <a href='#'>Anchor</a> </div> </div> </div> <div class="col s12 m3 l3"> <h6>Current Designation</h6> <ul class="collapsible row"> <li class="active"> <div class="collapsible-header"> <i class="mdi-av-web"></i>Developer </div> <div class="collapsible-body"> <p>Lorem ipsum dolor sit amet.</p> </div> </li> <li> <div class="collapsible-header"> <i class="mdi-editor-format-align-justify"></i>Developer </div> <div class="collapsible-body"> <p>Lorem ipsum dolor sit amet.</p> </div> </li> <li> <div class="collapsible-header"> <i class="mdi-av-play-shopping-bag"></i>Video Editor </div> <div class="collapsible-body"> <p>Lorem ipsum dolor sit amet.</p> </div> </li> <li> <div class="collapsible-header"> <i class="mdi-editor-insert-comment"></i>Support Asst. </div> <div class="collapsible-body"> <p>Lorem ipsum dolor sit amet.</p> </div> </li> </ul> </div> </div> </div>
If you observe the above code snippet carefully, you’ll find the use of Materialize cards for displaying content that comprises of different objects. Also, you can see the use of Material Collapsible in the last column. The collapsible are basically accordion elements which get expanded on getting clicked. Plus, they allow you to hide irrelevant content from the user.
Step 3- Design Portfolio Projects Page Using Materialize Framework
For displaying your prior projects, you’ll require the image of each work along with a title/live link. Here’s how the projects are displayed using floated material boxes:
<div class="container"> <h3>MY LATEST WORKS</h3> <div class="row"> <div class="col s12 m6 l6"> <div class="card"> <div class="card-image"> <a href='http://www.smarttutorials.net/invoice-system-using-jquery-php-mysql-bootstrap/'> <img src="images/invoice-system-php-mysql-jquery-bootstrap.png"> </a> <span class="card-title">Smart Invoice System</span> </div> <div class="card-content"> <p>This is an awesome tool for your marketing team and they can crack the deal at client's doorstep. Order PDF Invoice System Script today! and increase sales. It just comes at a fraction of one time price. Grab the deal today.</p> </div> <div class="card-action"> <a href="http://demo.smarttutorials.net/invoice-script-php/">PHP Invoice System Demo </a> <br /> <a href='http://www.smarttutorials.net/invoice-system-using-jquery-php-mysql-bootstrap/'>Invoice System Using jQuery PHP MySQL</a> </div> </div> </div> <div class="col s12 m6 l6"> <div class="card"> <div class="card-image"> <a href='http://www.smarttutorials.net/php-quiz-script/'> <img src="images/php-quiz-script.png"> </a> <span class="card-title">Smart Invoice System</span> </div> <div class="card-content"> <p>This version of Responsive PHP Quiz application has following new features are added. You may refer my previous versions of PHP MySQL quiz script tutorial to download php quiz script freely.</p> </div> <div class="card-action"> <a href="http://demo.smarttutorials.net/php-quiz-code/">PHP Quiz Script Demo </a> <br /> <a href='http://www.smarttutorials.net/php-quiz-script/'>Responsive PHP Quiz Script</a> </div> </div> </div> </div> </div>
Step 4- Design Responsive Contact Form Using Materialize Framework:
In order to enable a user to contact us, it is recommended to incorporate a contact form. You can do the same using Material form classes as shown below:
<div class="container contact"> <h3>Contact Me</h3> <hr> <div class="row"> <form class="col s12 m6 l6"> <div class="row"> <div class="input-field col s6"> <i class="mdi-action-account-circle prefix"></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="mdi-communication-phone prefix"></i> <input id="icon_telephone" type="tel" class="validate"> <label for="icon_telephone">Telephone</label> </div> </div> <div class="row"> <div class="input-field col s12"> <i class="mdi-communication-email prefix"></i> <input id="email" type="email" class="validate"> <label for="email"> Your E-Mail</label> </div> </div> <div class="row"> <div class="input-field col s12"> <i class="mdi-editor-mode-edit prefix"></i> <textarea id="icon_prefix2" class="materialize-textarea"></textarea> <label for="icon_prefix2">Message</label> </div> </div> </form> <div class="col s12 m6 l6 contact-holder"> <h6 class="mdi-action-home">Address</h6> <p>Nr. 6, 21 Awesome Street, Chennai, India</p> <h6 class="mdi-hardware-phone-android">Phone Number</h6> <p>+91 9999999999</p> <h6 class="mdi-action-open-in-browser">Website</h6> <p>SmartTutorials.net</p> </div> </div> </div>
Step 5- Design website footer Using Materialize Framework footer Components
Now, Materialize comes with a set of classes that allow you to create a fabulous footer for your portfolio website. Here’s the code snippet associated with the same:
<footer> <div class="footer-copyright"> <div class="container"> © 2015 Copyright by <a class="grey-text text-lighten-4" target="_blank" href="http://www.smarttutorials.net">SmartTutorials.net</a> <a class="grey-text text-lighten-4 right" target="_blank" href="http://www.smarttutorials.net">SmartTutorials.net</a> </div> </div> </footer>
With that you’re done with creating a stunning portfolio website using Materialize.
Materialize VS Bootstrap VS Foundation
While on one hand, Materialize is based on Google’s Material Design language; Bootstrap and Foundation are based on mobile first design language and flat design language respectively. While Bootstrap is highly customizable, Materialize comes with detailed documentation, making things simpler for you. Additionally, while Foundation is quick to prototype, Materialize is an open source CSS framework that’s equipped with numerous code examples, allowing you to get started with creating sites and apps instantly.
Conclusion
Here’s hoping the above post would have motivated you to initiate the creation or redesign of your site using the very renowned Materialize CSS framework. So, get started now and do share your experiences using the comments section below.
Author Bio:
Addison Cohen is an application developer for Appsted Ltd, a mobile app development company. He provides concrete information on latest mobile technologies.
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
