Materialize Documentation

Material design based mutipurpose HTML Template


Thank you very much for purchasing our template! If you have any questions that aren't covered in this documentation, please feel free to email us.

Materialize is a material design based multi-purpose responsive html template.
By utilizing elements and principles of Material Design, Materialize comes with 200+ HTML pages and over 150+ unique content blocks.
 
Materialize empowers you to build sites under Corporate, Creative, Agency, Restaurant, Blog, Charity, Consulting Firm, Portfolio, Construction, Parallax, App Landing, Book Opening and much more categories. Moreover Materialize comfortably suits all common website styles.
 
Materialize is fully responsive and built with bootstrap framework, be sure that it will fit any viewing device.
 
Let's have a quick look on features that Materialize have:

and much more…

 

Premium Features
===========================
 
1. Premium Revolution Slider ($14 Value)
2. Premium Menuzord - Responsive Megamenu ($7 Value)
3. Free Update
4. Excellent Customer Support

1. Unzip the file and find out the folder Materialize HTML. There are all html template files in this folder.

2. Folder Structure is as follows

assets (all assets/required file of this template)
--/bootstrap (bootstrap core files)
--/css (all css files)
--/flexSlider (flexSlider plugin)
--/fonts (font-awesome font icon set )
--/img (all images)
--/js (all javascript files)
--/magnific-popup (plugin for light-box)
--/materialize (material css and js)
--/owl-carousel (owl-carousel core files)
--/slider-revolution (all slider-revolution files are here)
--/videos (html5 video formats)
email-templates (a basic email template functional with contact form)
index.html (Home page)
sendemail.php (PHP file for functional contact form)

3.  You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.

4. Now enjoy the theme and adding section/feature according to your need.

Being based on Bootstrap, Materialize inherits its awesome grid system. It's a responsive, mobile first  grid that appropriately scales up to 12 columns as the device or view port size increases.

<!DOCTYPE html>
<html lang="en">
<head>
    <!--  meta tag -->
    <meta charset="utf-8">
    <title>Title goes here</title>
    <!--  favicon -->
    <link rel="shortcut icon" href="assets/img/ico/favicon.png">    
    <!--common style-->
   ...
</head>

<body id="top" >

    <!--header start-->
    <header id="header" class="tt-nav transparent-header">
       ...
    </header>
    <!--header end-->

    <!--slider revolution start-->
    <section class="slider-revolution-wrapper">
        ...
    </section>
    <!--slider revolution end-->

    <!--body content start-->
    <section class="section-padding">
        <div class="container">
            <div class="row">
                ...
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <!--body content end-->

    <!--footer start -->
    <footer class="footer footer-four">
        <!--primary footer-->
        <div class="primary-footer">
            ...
        </div>
        <!--primary footer end-->
        <!--secondary footer-->
        <div class="secondary-footer">
            ...
        </div>
        <!--secondary footer end-->
    </footer>
    <!--footer end-->

    <!-- Preloader -->
    <div id="preloader">
        <div class="preloader-position"> 
            ...
        </div>
    </div>
    <!-- End Preloader -->

<!-- Placed js at the end of the document so the pages load faster -->

....

</body>
</html>

You can find LOGO container into header section

<!--logo start-->
<a href="index.html" class="logo-brand">

  <img src="assets/img/logo.png" alt=""/>

</a>
<!--logo end-->
We've multi types of logo style - logo light, logo dark, logo colored like img/logo.png, img/logo-dark.png img/logo-colored.png.  logo-dark should be used in light navigation.
 
You can use any kind of logo adjusting with Navigation Bar.
Materialize uses google font. So you can feel free to use any google font what you like best.
Materialize used "Raleway" google font for main demo,  "Lora" and "Raleway" combined in Digital Agency demo and "Roboto"  and "Raleway" combined in Resturent Demo.
 
You can find the Link to the <head>  tag of all the .html files like this
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,500,700,900' rel='stylesheet' type='text/css'>
 
And you have to add the font name into css file like 
font-family: 'Raleway', sans-serif !important;
There is a search button in right corner of every menu. You can add or remove it vary easily. Add <div class="search-wrapper">  div with it's all inner content just before <div class="menuzord" into container  section. And add .has-header-search class in <body id="top" tag for proper alignment of search button. 
<body id="top" class="has-header-search">

 <!--header start-->
 <header id="header" class="tt-nav">
   <div class="header-sticky light-header">
    <div class="container">

     <div class="search-wrapper">
      <div class="search-trigger pull-right">
        <div class='search-btn'></div>
         <i class="material-icons">search</i>
       </div>

      <!-- Modal Search Form -->
      <i class="search-close material-icons">close</i>
      <div class="search-form-wrapper solid-bg">

     <form action="#">
      <div class="input-field">
      <input type="text" name="search" id="search">
      <label for="search" class="">Search Here...</label>
      </div>
      <button class="btn pink search-button waves-effect waves-light" type="submit">
       <i class="material-icons">search</i>
    </button>
   </form>

   </div>
  </div><!-- /.search-wrapper -->

   <div id="materialize-menu" class="menuzord">

    <!--mega menu start-->
     <ul class="menuzord-menu pull-right">
       <li><a href="#">Home</a> </li>
       ...
     </ul>
    <!--mega menu end-->

    </div>
   </div>
   </div>
 </header>
 <!--header end-->

</body>
 

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Material Icon

Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

 

Material Icons
====================

Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects, hosted by Google.

Material Icon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.

There are two options to add a material icon in your web site. You can simply add  <i class="material-icons">layers</i>  icon name with material-icons  class.  Which is supported by all modern browser.

If you want to show all icons in Internet Explorar 9 or below you should add icons unicode like this <i class="material-icons">&#xE53B;</i>  

<!-- For modern browsers. -->
<i class="material-icons">layers</i>

<!-- For IE9 or below. -->
<i class="material-icons">&#xE53B;</i>

 

For IE9 compatibility reason we used second option(with Unicode). You can simply use the first option. 
 
Here https://design.google.com/icons/ you will get 900+ Material Icons and it's unicodes. 
Just click on a icon, a popup window will appear from bottom then click on  ICON FONT from right top corner you will get both versions of each icon.

 

Materialize have 10 different page title
 
  1. Default Title
  2. Background Title
  3. Background Transparent Title
  4. Parallax Transparent Title
  5. No Background Title
  6. Pattern Title
  7. Center Align Title
  8. Right Align Title
  9. Dark Title
  10. Mini Title

 

1. Default Title
==================
 
Default Page Title style with Text Left aligned & Breadcrumbs Right aligned.
<!--page title start-->
<section class="page-title ptb-50">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Default Page Title</h2>
                <ol class="breadcrumb">
                    <li><a href="#">Shortcodes</a></li>
                    <li class="active">Page Title</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<!--page title end-->
 

 

2. Background Title
==================
 
<section class="page-title page-title-bg overlay ptb-190">
    ....
</section>  

 

3. Fixed Background
=====================
 
<section class="page-title page-title-bg fixed-bg overlay ptb-190">
    ....
</section> 

 

4. Page Title Center
=====================
 
<section class="page-title page-title-center ptb-90">
    ....
</section> 

 

5. Page Title Dark
=====================
 
<section class="page-title dark-bg ptb-90">
    ....
</section> 

 

6. Page Title Parallax
=======================
 
<section class="page-title parallax-bg page-title-bg overlay ptb-190" data-stellar-background-ratio="0.1">
    ....
</section> 

 

7. Page Title No BG
=======================
 
<section class="page-title ptb-50 no-bg">
    ....
</section>

 

8. Page Title Pattern BG
=======================
 
<section class="page-title pattern-bg ptb-50">
    ....
</section> 

 

9. Page Title Right
=======================
 
<section class="page-title page-title-right ptb-50">
    ....
</section>

 

10. Page Title Mini
=======================
<section class="page-title ptb-30">
    ....
</section>
The standard page section has the following... 
<section class="section-padding">
    <div class="container">
      <div class="text-center mb-80">
          <h2 class="section-title text-uppercase">Who we are</h2>
          <p class="section-sub">Quisque non erat mi. Etiam congue et augue sed tempus.</p>
      </div>
    </div><!-- /.container -->
</section>

 

Section Background color change
=================================
 
You can change the section background color. like gray-bg/dark-bg.
For gray background color please add extra class name gray-bg  and For dark background color add class name dark-bg .
<section class="section-padding gray-bg">
    <div class="container">

    </div><!-- /.container -->
</section>

 

Parallax Section
=========================
 
For parallax section add class name parallax-bg  with banner-wrapper banner-wrapper class and chose a banner number for background image.  Add data-stellar-background-ratio="0.1 to 0.9"
You can change background Image from CSS.
 
<section class="section-padding banner-wrapper parallax-bg overlay banner-7" data-stellar-background-ratio="0.5">
    <div class="container">

    </div><!-- /.container -->
</section>
We have created some useful helper classes for you. Here are a few of them:
.radius-2 to .radius-4 (for border radious)
.font-20 to .font-40 (for inline font-size)
.line-height-40 (for inline line-height)
.text-light (for light(300) text)
.text-regular (for regular(400) text)
.text-medium (for medium(500) text)
.text-bold (for bold(700) text)
.text-extrabold (for extra bold(900) text)

.brand-color (for theme primary color)
.brand-bg (for theme primary background color)

.full-height (for device full height)
.half-height(for device half height)

 

For Margin Classes:

.no-margin {
    margin: 0 !important;
}

.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}
.no-padding {
    padding: 0 !important;
}
.section-padding {
    padding: 110px 0;
}

/*margin top*/
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-50 {
    margin-top: 50px;
}
.mt-80 {
    margin-top: 80px;
}
.mt-100 {
    margin-top: 100px;
}
/*margin bottom*/
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}
.mb-80 {
    margin-bottom: 80px !important;
}
.mb-100 {
    margin-bottom: 100px !important;
}
.mtb-50 {
    margin: 50px 0 !important;
}
/*margin right*/
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}

 

 

For Padding Classes:

/*padding-top*/
.padding-top-50 {
    padding-top: 50px;
}
.padding-top-70 {
    padding-top: 70px;
}
.padding-top-90 {
    padding-top: 90px;
}
.padding-top-100 {
    padding-top: 100px;
}
.padding-top-110 {
    padding-top: 110px;
}
.padding-top-120 {
    padding-top: 120px;
}
.padding-top-160 {
    padding-top: 160px;
}
/*padding-bottom*/
.padding-bottom-20 {
    padding-bottom: 20px;
}
.padding-bottom-30 {
    padding-bottom: 30px;
}
.padding-bottom-50 {
    padding-bottom: 50px;
}
.padding-bottom-70 {
    padding-bottom: 70px;
}
.padding-bottom-80 {
    padding-bottom: 80px;
}
.padding-bottom-90 {
    padding-bottom: 90px;
}
.padding-bottom-100 {
    padding-bottom: 100px;
}

.padding-bottom-110 {
    padding-bottom: 110px;
}
.padding-bottom-120 {
    padding-bottom: 120px;
}

@media screen and (min-width: 992px) {
    /*padding left*/
    .pl-100 {
        padding-left: 100px;
    }
}

/*padding top bottom*/
.ptb-30 {
    padding: 30px 0;
}
.ptb-50 {
    padding: 50px 0;
}
.ptb-70 {
    padding: 70px 0;
}
.ptb-90 {
    padding-top: 90px;
    padding-bottom: 90px;
}
.ptb-110 {
    padding-top: 110px;
    padding-bottom: 110px;
}

.ptb-120 {
    padding-top: 120px;
    padding-bottom: 120px;
}
.ptb-150 {
    padding: 150px 0;
}
.ptb-190 {
    padding: 190px 0;
}

/*Margin for small devices*/
@media (max-width: 991px) {
    .mb-sm-30 {
        margin-bottom: 30px;
    }
    .mb-sm-50 {
        margin-bottom: 50px;
    }
    .mt-sm-50 {
        margin-top: 50px;
    }
}
 

Portfolio filter structure is following..

<div class="portfolio-container text-center">
    <ul class="portfolio-filter brand-filter">
        <li class="active waves-effect waves-light" data-group="all">All</li>
        <li class="waves-effect waves-light" data-group="websites">Websites</li>
        <li class="waves-effect waves-light" data-group="branding">Branding</li>
        <li class="waves-effect waves-light" data-group="marketing">Marketing</li>
        <li class="waves-effect waves-light" data-group="photography">Photography</li>
    </ul>
</div>

 

Portfolio Item structure is following...

<div class="portfolio col-4 gutter">
  <div class="portfolio-item" data-groups='["all", "branding", "photography"]'>
    <div class="portfolio-wrapper">
      <div class="thumb">
        <div class="bg-overlay"></div>
        <img src="assets/img/portfolio/portfolio-1.jpg" alt="">
        <div class="portfolio-intro">
          <div class="action-btn">
            <a href="assets/img/portfolio/portfolio-5.jpg" class="tt-lightbox" title=""><i class="fa fa-search"></i></a>
          </div>
          <h2><a href="#">Portfolio Title</a></h2>
          <p><a href="#">Branding</a></p>
        </div>
      </div><!-- thumb -->
    </div><!-- /.portfolio-wrapper -->
  </div><!-- /.portfolio-item -->
</div>

We have 5 column option (2 column, 3 column, 4 column, 5 column and 6 column) with gutter and gutter less.

 

If you want to show 3 column portfolio items then code as follows
 
<div class="portfolio col-3">

</div>

Here just added class name col-3 into portfolio tag like  <div class="portfolio col-3 ">

Similarly you can set

column 2 col-2

column 4 col-4

column 5 col-5

column 6 col-6

and if you need gutter of those column the just add a gutter class name , like this...

<div class="portfolio col-3 gutter">

</div>

 

 

Portfolio with Title
==========================
 
Portfolio with title structure are as follows
<div class="portfolio portfolio-with-title col-4">
    <div class="portfolio-item" data-groups='["all", "branding", "photography"]'>
      <div class="portfolio-wrapper">
        <div class="thumb">
          <div class="bg-overlay brand-overlay"></div>
          <img src="assets/img/portfolio/portfolio-1.jpg" alt="">
          <div class="portfolio-intro">
            <div class="action-btn">
              <a href="assets/img/portfolio/portfolio-1.jpg" class="tt-lightbox" title="iOS Game Design"> <i class="fa fa-search"></i></a>
            </div>
          </div>
        </div><!-- thumb -->
        <div class="portfolio-title">
            <h2><a href="#">Creative Design</a></h2>
            <p><a href="#">iOS Design</a> </p>
        </div>
      </div><!-- /.portfolio-wrapper -->
    </div><!-- /.portfolio-item -->
</div>

 

 

Portfolio Card Style
==========================
 
Portfolio card style structure are as follows
<div class="portfolio-item">
  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="assets/img/portfolio/portfolio-1.jpg" alt="image">
    </div>
    <div class="card-content">
      <span class="card-title activator">Portfolio Title <i class="fa fa-ellipsis-v right"></i> <i class="fa fa-heart-o right"></i></span>
      <p><a href="#">Photography</a></p>
    </div>

    <div class="card-reveal">
      <span class="card-title">Portfolio Title<i class="material-icons right">close</i></span>
      <p><a href="#">Photography</a></p>
      <p>Authoritatively grow quality technologies for strategic sources.</p>
      <a href="#" class="readmore">View full project</a>
    </div>
  </div><!-- /.card -->
</div><!-- /.portfolio-item -->

 

 

 

 

In Materialize you will get booth version (version 4 and version 5) of the Revolution Slider. You can use any one of them which you like most.  (You will get Revolution Slider version 4 with Construction Demo.)

You will get full documentation  with relevant folder.

Important:  Some of the features of Revolution Slider (latest version 5.x) may not work in local server. If you want to work/test on local server you need to include extensions of revolution slider (You do not need to include on live server).

We used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.
 
First open script.js from assets/js/scripts.js find out  /* ======= GOOGLE MAP ======= */  wrapper.  
Put your latitude longitude, put your map marker at $marker_url.
Write your address in "contentString".  
You can also change map color form "stylers"  zoom options form "map_zoom"
 
If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/ you can easily generate.
 
 In html put the map "id" in any section and give it a min-height(your desired height)
 
 
HTML Markup:
===================
<!-- map-section -->
<div id="myMap" class="height-350"></div>
<!-- /.map-section -->
 
 
JS Markup: 
================
 
/* ======= GOOGLE MAP ======= */
    jQuery(document).ready(function($) {
        //set your google maps parameters
        var $latitude = 40.716304,
            $longitude = -73.995763,
            $map_zoom = 16; /* ZOOM SETTING */

        //google map custom marker icon 
        var $marker_url = 'assets/images/pin.png';

        //we define here the style of the map
        var style = [{
            "stylers": [{
                "hue": "#03a9f4"
            }, {
                "saturation": 10
            }, {
                "gamma": 2.15
            }, {
                "lightness": 12
            }]
        }];
        //set google map options
        var map_options = {
            center: new google.maps.LatLng($latitude, $longitude),
            zoom: $map_zoom,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            styles: style,
        }
        //inizialize the map
        var map = new google.maps.Map(document.getElementById('myMap'), map_options);
        //add a custom marker to the map                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($latitude, $longitude),
            map: map,
            visible: true,
            icon: $marker_url,
        });

        var contentString = '<div id="mapcontent">' + '<p>Materialize, 795 Folsom Ave, San Francisco.</p></div>';
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 320,
            content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map, marker);
         });
    });

 

In Materialize template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open  "sendemail.php" file from root folder in any code editor .  

Go to the line number 9.  There is a line: 

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via email.

Configuring and Set-up countdown time is extremely easy. To customize/change the countdown time, please open script.js from assets/js/scripts.js in any code editor.  Find out  /* === CountDown === */ wrapper,  put your date in existing date.

The script is look like:

        /* === CountDown === */
        if ($('.countdown').length > 0) {
            $(".countdown").countdown({
                date: "31 december 2017 12:00:00",
                format: "on"
            });
        }
We used a dynamic full functional Mailchimp  Newsletter Subscription form  in this template. You can easily change your Mailchimp form post url.
 
Open "ajaxchimp-config.js" from assets/js/ folder.  
Replace exsisting url with your own mailchimp form post url inside the url: "---".
 
        if ($('.project-carousel').length > 0) {
            $('.mailchimp').ajaxChimp({
                callback: mailchimpCallback,
                //replace bellow url with your own mailchimp form post url inside the url: "---".
                url: "http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&amp;id=c335e5ec53" 
            }); 
            function mailchimpCallback(resp) {
                 if (resp.result === 'success') {
                    $('.subscription-success').html('<i class="fa fa-check"></i>' + resp.msg).fadeIn(1000);
                    $('.subscription-error').fadeOut(500);
                } else if(resp.result === 'error') {

                    $('.subscription-error').html('<i class="fa fa-times"></i>' + resp.msg).fadeIn(1000);
                }  
            }
        }

 

VERSION 1.5
======================
 
Added:
 
1. Added dark and light alter logo for transparent navbar
 
 
Fixed:
===================
1. Optimaized some css
2. Minor issue fixed
 
 
Changed:
===================
1. Changed logo and template title for a copyright concern.
2. Replaced all .matrox and .matrox-* classes with .materialize class
 
 
Updated: Documentation
 
 
 
 
VERSION 1.4
======================
 
Added:
 
1. New Demo for  SEO Agency (full website demo)
2. New Demo for Coffee Shop (full onepage demo)
3. Shortcode Pricing Table Page
4. Shortcode Food Menu Page
5. New shortcode featured services
6. Multiple Map in single page (in CoffeeShop Demo)
7. New Flaticon added in fonts folder(used in coffeeshop)
 
 
Fixed:
===================
1. Optimaized some css
2. Minor Slider issue fixed
3. Minor css issue fixed
 
 
Updated: Documentation
 
 
 
 
VERSION 1.3
======================
Added JS
1. ajaxchimp-config.js
 
Fixed:
===================
1. Mail Chimp javascript conflict
 
 
 
 
VERSION 1.2
======================
Added New Demo:
1. Event Landing Page
2. ComingSoon Page
 
 
Integrated:
====================
1. Mailchimp Subscription
2. Count Down Script 
 
 
Fixed:
===================
1. Modified some section design
2. Modified alert design
3. Onepage menu issue fixed
4. Minor issue fixed
 
 
 
 
VERSION 1.0
======================
1. Initial release
 
 
 
 
 
Instructions for Previous (VERSION 1.0) user:
======================================================
If you want to use new features from updated file you need to replace your css folder and js folder with the updated css and js folder. 
 
Warning: You should keep a backup of your all previous file, replacing folders and files may replace your custom css and javascript. 

HTML/CSS
==============

Twitter Bootstraphttp://getbootstrap.com/

Material CSS: http://materializecss.com/

 

Fonts
=============

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

Material icons: https://design.google.com/icons/

 

JavaScripts
============

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

sticky: https://github.com/garand/sticky

smoothscroll: http://cferdinandi.github.io/smooth-scroll/

countTo: https://github.com/mhuggins/jquery-countTo

stellar: http://markdalgleish.com/projects/stellar.js/

Shuffle: http://vestride.github.io/Shuffle/

inview: https://github.com/protonet/jquery.inview

owl.carousel: http://owlgraphic.com/owlcarousel/

 

Image Credits:
================

Graphic Stock: https://www.graphicstock.com/

Freepik: http://www.freepik.com/

Nothingtochance: http://nothingtochance.co/

 

 

Photos and Videos:
===================

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.
 
 
 
End:
==============
Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Trendy Theme Team :)