Muris

Thank you for purchasing the Muris Coming Soon template and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all the template's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online to you free of charge on our website at http://doc.dartsimple.com

Developer website: http://www.dartsimple.com

Customer service: http://www.dartsimple.com/contact-us/

 

 

Key Features

  • Based On 1170px Grid System
  • MailChimp Integrated
  • Send email script integrated
  • Free Subscribe Email Management Tool
  • Free Google Fonts
  • Retina Ready
  • Unique Design & Super Clean Layout
  • All Files Are Well Commented
  • Built With Bootstrap 3x
  • Coded With Care Valid HTML5 / CSS3
  • Fully Responsive Layout
  • Over 580 Icons With Font Awesome 4
  • Beautiful CSS3 Animation
  • W3C Valid Code
  • Carefully Handpicked Google Fonts
  • Clean Source Code
  • Easy Installation & Updates
  • Easy To Customize

 

What you will Get with this Template

  • 1 Html File
  • 1 Homepage Layout
  • 1 Navigation Types
  • 1 About Us Layput
  • 1 Our Mission Layout
  • 1Team Layout
  • 1 Contact Us Layout

 

Email Management Tool

Template includes custom-developed subscriber email management tool that saves and keeps track of all subscriber emails on your Coming Soon website. You can use a separate dashboard to review and export this email data to CSV and to your MailChimp account

 

How to Use 

Step 1: Set your password

The tool is saved in folder Admin. In this folder, you will find the file "settings.ini". Please open this file with notepad and locate fields Login, Password, and save your username and password to be used to log in to the admin panel with email subscriber data. If integrating with MailChimp, please also locate the field "list_id" in the "settings.ini" file, and set its value to your MailChimp API Key (Please refer to MailChimp user manual for further details at developer.mailchimp.com/documentation/mailchimp/ ). Your email management tool is now ready to use.

Step 2:  Log in to Email Management Tool

Your tool will be available for login as soon as you upload it to your server. Login form will appear at the address yourdomain.com/admin. Once you load the form, please log in using the username and password set in Step 1. Upon logging in, you can review, edit, delete and export subscriber email data to CSV and to MailChimp.

Step 3: Savings Data is Automatic

The tool is integrated with your Coming Soon front-end HTML by default, and will be saving subscriber email data to your admin panel and to the subscribers.txt file automatically.

 


About the Theme

Muris Coming Soon Template is a fully responsive HTML template with clean, unique modern design and integrated animated countdown. Countdown lets your users know when the site will be launched. Also included in an easy-to-use subscriber email management tool with MailChimp integration and integrated send email script that will connect to your smtp server and send emails from your users. Each web page is 100% W3C compliant with clean, well-commented and fully valid code.

Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

Muris/
├── Documentation/
├── TemplateMuris/
│   └── admin/
│       └── css/
│           └── *.css
│       └── img/
│           └── favicons/
│               └── *.jpg, *.png, *.ico
│           └── *.jpg, *.png, *.ico
│       └── js/
│           └── *.js
│       └── index.php
│       └── login.html
│       └── settings.ini
│       └── subscribers.txt
│       └── template.html
│   └── assets/
│       └── plugins/
│           └── bootstrap/
│           └── font-awesome/
│           └── jQuery/
│           └── flexslider/
│           └── slick/
│   └──css/
│       └── *.css
│   └── images/
│└── *.jpg, *.png
│       └── custom/
│           └── *.png
│       └── favicon/
│           └── *.jpg, *.png, *.ico
│       └── item-bg/
│           └── *.jpg
│       └── svg/
│           └── *.svg
│   └── js/
│   └── videos/ 
│   └── *.mp4
│  └── email.php
│   └── index.html

 

Project Folder Description

Folder Name

Description

Muris

Main directory

Documentation

Contains documentation about template, dependencies and short description

Template Muris

Main layout dirrectory

admin

Contains mailchimp integration files and admin panel layout

admin/css

Contains styles for admin panel

admin/img

Contains images for admin panel

admin/js

Contains javascript code for admin panel

assets

Contains third party plugins

css

Contains main layout style files

images

Contains main layout omages

images/favicon

Contains favicon images and bookmark description

js

Contains javascript files of layout, plagins initiations and custom script

videos

Contains homepage background videos

 

HTML Structure

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Muris Template follows an easy-to-use method of customization via HTML data attributes placed in the <body> tag, so you can quickly tweak the code and adjust the appearance of your website. All customizable elements and relevant attributes are listed below for your convenience.

Sample code:

<body 
data-deadline="30 May 2017 20:30:30 GMT-0400"
    data-color="#4b2222"
    data-effect="Shift"
    data-video="videos/video.mp4"
    data-email="[email protected]">

 

Data Attributes

Available Settings

Description

data-deadline

Any date in provided format

Sets the date of project launch

data-color

Color in a HEX format

Setting color for main items

data-effect

Shift, Parallax, None

Setting content appear animation

data-video

videos/clothes.mp4,

videos/coworking.mp4,

videos/freelance.mp4, videos/street.mp4, videos/city.mp4,

videos/cafe.mp4,
videos/nature.mp4

or else ource path to video file

Setting homepage background video

data-email

Email in provided format

Email for notifications

 

ColorSchemes

When customizing the template, you will be able to utilize a number of predefined color schemes. To do so, please add the CSS file with different color scheme under the template.css file to change the color theme of the template:

<link rel="stylesheet" href="css/template.css">

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags -->
<meta name="Muris- Premium template" content="">

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

<!-- Meta descriptions -->
<meta name="keywords" content="Muris, premium template, wg template, web grind" />
<meta name="description" content="Muris- Premium template by Web Grind">

<!-- Url of your website (without extra pages) -->
<link rel="canonical" href="http://yoursite.com/" />

<!-- Restrict google from scanning info from Dmoz or YahooDir -->
<meta name="robots" content="noodp,noydir"/>

<!-- Author markup -->
<meta name="author" content="Dart Simple - Premium HTML templates">
<meta name="copyright" content="Dart Simple">

 

Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/).

 

CSS Structure

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Muris is no exception to this rule. Full list of stylesheet files is available below for your review.

File Name

Description

bootstrap.css

Bootstrap framework styles

template.css

Main template Styles

custom.css

File for custom/addition styles

  

Stylesheet Structure

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

/*===========================================================

Muris - Premium template by Dart Simple 
Copyright 2017

Table of contents

01. Fonts
02. Main Layout
03. Controls
04. Header
05. Main menu
06. Footer
07. Modals
08. Customizer

=============================================================*/

 

Framework used

Twitter Bootstrap v3.3.7

http://getbootstrap.com/

jQuery v2.2.1

http://jquery.com/

JavaScript Structure

When designing a theme or a template, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

Plugins are initialized and can be edited in the lower part of the code for each HTML file as follows:

<!-- jQuery -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<!-- jQuery Validate -->
<script type="text/javascript" src="assets/plugins/jquery-validate/jquery.validate.min.js"></script>
<!-- FSVS carousel scripts -->
<script type="text/javascript" src="assets/plugins/fsvs/fsvs.js"></script>
<script src="assets/plugins/fsvs/bundle.js"></script>
<!-- Theme Custom Scripts -->
<script type="text/javascript" src="js/wg-custom.min.js"></script>
<!-- Theme scripts -->
<script type="text/javascript" src="js/wg-scripts.min.js"></script>

 

JavaScript folder structure and contents

Js/
├──wg-scripts.js
│   └── wg-scripts.min.js
├──wg-plugins.js
│   └── wg-plugins.min.js
├──wg-custom.js
│   └── wg-custom.min.js

 

JavaScript Plugins Initialization

Below we provide the code used to initialize JavaScript plugins used in the template.

Fsvs

{
speed : 1000,
nthClasses : 4,
mouseDragEvents : false,
  pagination: false
mouseWheelDelay : 500,
beforeSlide : function(){…},
afterSlide : function(){…}
}

 

Callback Functions

Listed below are available callback functions and their relevant settings.

// Go to the next item
app.menu.init()
//Initmenu for app.mebu.el;

app.slider.init()
//Init vertical scroll slider for app.slider.el;

app.modal.show(obj)
//Show modal window

app.modal.hide()
//Hide all modal windows


app.validate.init();
// inits validation plugin for all app.validate.el

countDown.init();
//inits countdown

 

Credits

JavaScript Plugins and Credits

fsvf jQuery plugin

Vertical scroll plugin

https://github.com/lukesnowden/FSVS

bootstrap

Used for Grid, Modals, Main fetures style

http://getbootstrap.com

 

JavaScript

CSS

Videos

  • pexels.com