Munu - Beauty HTML5 Template

Documentation

Template Name: Munu
Author: Thememarch
Version: 1.2
Last Update: 5 May 2019

Thank you very much for purchasing the template. We've put a lot of hard work into it, and we hope you love it as much as we do. As far as the documentation is concerned, we have tried to cover as much as possible to help you get your new template up and running and to help you customize it. If you have any questions that are beyond the scope of this help file, please feel free to drop us an email. Thanks so much!

Installation

To install Munu on your web server, download the files from Themeforest and unzip them to the local disk on your computer. Inside the extracted folder you will see three folders named Documentation, munu and munu-rtl.

munu folder structure is as follows:

  • assets
    • css - contains all vendor and custom css files
    • fonts - contains icon fonts
    • images - contains all images used in the template
    • js - contains all vendor and custom js files
    • sass - contains all PHP files
    • php - contains all PHP files
  • index.html
  • index-2.html
  • blog.html
  • blog-leftsidebar.html
  • blog-details.html
  • blog-details-leftsidebar.html
  • blog-details-gallery.html
  • blog-details-audio.html
  • blog-details-video.html
  • products.html
  • products-leftsidebar.html
  • products-nosidebar.html
  • product-details.html
  • product-details-leftsidebar.html
  • product-details-nosidebar.html
  • cart.html
  • wishlist.html
  • checkout.html
  • my-account.html
  • login-register.html

Using an FTP Client (such as Filezilla or Total Commander), you will need to upload all of the contents of the chosen folder to your server.

HTML Structure

This template is based on a responsive and full screen layout. And it's built using HTML5 standards. This teamplate includes:

index.html

From beginning of the <body> tag till the ending </body> tag, all the codes and texts are used for the template structure. You can change any text from the template by navigating through the index.html file and localizing each line of text you want to change.

Like index.html, you can change any page included with this template starting from <body> tag till ending </body> tag.

Change Placeholder Images

When you download the template files you will see we used placholder images instead of those originals we used in our preview link. To change with your desired images replace the placeholder images.

We use Default logo as a image logo. If you want to use text instead of logo, just remove the image and add your text inside <h2>YOUR_TEXT</h2>

Icons

We used two type of font icons in this template.

  • Themify

Themify

List of all icons with their classes is here.

Example use with class "ti-close": <i class="ti ti-close"></i>

CSS Files

All the css files are located in the assets/css folder of the template.
assets/css/vendors - Includes all 3rd party plugins (css files) in the template.
style.css - Main stylesheet which includes all the styles of the template.

JavaScript Files

All vendor, 3rd party plugin and our custom JavaScript files are located in the assets/js folder.
assets/js/vendors - Includes all 3rd party plugins (js files) in the template.
main.js - Our custom JavaScript file. You can add your custom js codes there if you need to.

Please DO NOT edit this files unless you have JavaScript coding experience. Simple mistakes can cause serious damage to the scripts

PHP Contact Form

Our contact form is totally functional, after submit form you can see form data on your E-mail.
You just go to php folder, In side php folder you can see mailer.php file, open it and just change email address like Image.

Mailchimp News Letter

Our Mailchimp News Letter is completely functional, When you click subscribe button the email address is stored your mailchimp profile.
You just go to js folder and open main.js file. Add mailchimp link on this file like image.

Sources and credits

Image Credits:

jQuery Plugins:

Gulp Installation

Gulp requires node to run. And it usages npm packages to perform different task, So install node and npm first.Please fllow the guide

> Installing node

Go to https://nodejs.org/en/ and download the appropriate version for you OS.

> Installing Gulp

Go to command and run npm install -g gulp it will install gulp globally.

> Getting started

Now navigate to the munu folder and run npm install, it will install all the dependecies.

Gulp Usage

We create different gulp task for different purpose. You can run these task by navigation to the munu folder and run the task command like gulp build

Important note: Gulp not applicable with rtl version.

> gulp / gulp default

Gulp command is equivlent to gulp default it runs the default task that has been assigned to it. In this particular project Gulp serves the project in the browser, watches for sass,css,js,html changes and synces and excutes task associated with it.

> gulp dist

This command will take the html, css, js, fonts from the src/ directory to dist/ with optimizing the images, cmpiling the sass, minimizing the css and js file. ready to upload.

> gulp build

This command will take the html, css, js, fonts from the src/ directory to dist/ with optimizing the images, cmpiling the sass, minimizing the css and js file. Difference between build and dist is on dist command the css and js files compress into 4 files only. 2 js file and 2 css file and injected into html files. for better performance.

> gulp buildfinal

It is necessary to run gulp buildfinal task with gulp build task.

Important note: For better image optimization, We used Tinypng api based gulp-tinypng-compress package. It requires a API key to perform the task. Please the the api key with your own API key like shown in the image below.

To get the api key please vist this link https://tinypng.com/developers. Sign up with you email and get the api key from here https://tinypng.com/dashboard/developers

Rate This Template

If you like this template, please remember to rate it on ThemeForest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on ThemeForest, then next to this template give it the five star rating :)

rating

We would love to hear your feedback. If you find any bugs or have suggestions for improvements please get in touch. Nearly all of the time we follow your advice and issue a rapid update.