Introduction :
Material is designed by google which is a design combines both classic design along with technology and innovation. Now here we will know about principles of material design.
-
Metaphor :
which defines space and motion, technology is inspired from paper and ink to utilize to help out creativity and innovation. Surfaces and edges provide common visual cues that allow users to speedily understand the material world.
-
Bold, Graphic and Intentional:
In this material design which offers typography , colors, grids, forms and buttons and lot more features for the users to create effective materialize css template.
-
Motion:
Motion provides user a full clarity about objects and transformations, which gives consistency and continuity to user.
Pre requisites to start materialize css template design
Before we start working on materialize css , we need to download standard version from website .
Here you will find two versions
1. Materialize
2. Saas
I will prefer Materialized version than Saas, because which is easy and simple to setup the project. Now let’s download the standard version and extract all files to your project’s root. After extraction the file structure looks like blow.
Now you have successfully extracted the files, let’s start our first template using Materialize Css.
Now how your basic index.html page looks?
Here you need to import materialize.min.css file at header section and need to load jquery latest plugin and materialize.min.js file after loading jquery plugin first. Please add these two plugins at bottom of the html body, for better performance.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://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-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Now let’s check how grids are designed in materialized css, which are very constructive to create template in two column or three column templates. Let see how these css classes used for girds.
In this material design girds are designed into 3 types there are S stands for small, M stands for medium and L stands for Large. Here screen is divided into 12 sections which are called by using below classes.
<div class=”col s1”></div> <div class=”col m4”></div> <div class=”col l4”></div>
Above classes can be used in small, Medium and large screens. “Col s1” indicates “1 column on small screen “reaming classes also reflects same meaning.
Now add these grids into your index.html page to create template. The code looks as below
<div class="row">
<div class="col s12 m4 l3">
/* which is sidebar widget area. side bar have 3 screens out of 12 for desktops and 4 screens of out 12 for tablets and 12 screens out of 12 for mobile devices */
</div>
<div class="col s12 m8 l9">
/* In this content section , content have 9 screens out of 12 for desktops and 8 screens of out 12 for tablets and 12 screens out of 12 for mobile devices.*/
</div>
</div>
The above code is placed in the body section to display all your content pages and side navigation bars.
Now we are going to add navigation bar to header section using materialize css designs. Let’s check classes for the navigation menu.
The navbar is absolutely contained by Associate in Nursing HTML5 Nav tag. Within a counseled instrumentation div, there ar two main components of the navbar. A emblem or complete link, and also the navigations links. you’ll align these links to the left or right. Please add below code above the container section.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Logo</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
Now we have completed our navigation section, now let’s create footer section for our template, Footers area unit a good thanks to organize plenty of web site navigation and knowledge at the top of a page. this is often wherever the user can look once they need finished scrolling through the present page or area unit searching for further info regarding your web site.
Materialize design uses flexbox to structure our markup language so the footer is usually on very cheap of the page. it’s vital to stay the structure of your page inside the three HTML5 tags:
<header>, <main>, <footer>
The footer code can be added after container which looks like as below.
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Terms & Conditions</a></li>
<li><a class="grey-text text-lighten-3" href="#!">About us</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2016 Copyright for ektree
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
Thanks for reading this article, we have created a sample template using materialize css template please check the code below. Thanks!
Leave A Comment