Tauri

Thank you for purchasing the Tauri 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 Subscriber Email Management Tool
  • Mail Chimp Plugin Included
  • 1 About Page Layout
  • 1 Contact Page Layout
  • 1 Homepage Layout
  • 1 Navigation Types
  • 1 Our Mission 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

Tauri 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.

Tauri/
├── Documentation/
├── Template Tauri/
│   └── admin/
│       └── css/
│           └── *.css
│       └── img/
│           └── favicons/
│               └── *.jpg, *.png, *.ico
│           └── *.jpg, *.png, *.ico
│       └── js/
│           └── *.js
│       └── index.php
│       └── login.html
│       └── settings.ini
│       └── subscribers.txt
│       └── template.html
│   └── assets/
│       └── fonts/
│           └── Exo/
│           └── Montserrat/
│           └── Work_Sans/
│       └── plugins/
│           └── bootstrap/
│           └── font-awesome/
│           └── jQuery/
│           └── jquery-validate/
│           └── owl.carousel/
│   └── css/
│       └── colors/
│           └── *.css
│       └── *.css
│   └── images/
│       └── 2x/
│           └── *.jpg, *.png
│       └── favicon/
│           └── *.jpg, *.png, *.ico

│       └── ie/
│           └── *.jpg, *.png
│   └── js/
│   	└── *.js 
│   └── email.php
│   └── index.html

 

Project Folder Description

Folder Name

Description

Tauri

Main directory

Documentation

Contains documentation about template, dependencies and short description

Template Tauri

Main HTML  dirrectory

Admin

Contains mailchimp integration files, admin panel HTML and scripts

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

css/colors

Contains colors variations

images

Contains main HTML omages

images/2x

Contains retina ready 2x size images

images/favicon

Contains favicon images and bookmark description

images/ie

Contains blured images for is browsers

js

Contains javascript files of layout, plagins initiations and custom script

email.php

Send email script, used to send emails from the contact form.

 

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.

Tauri 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="21 May 2017 20:30:30 GMT+0200" 
    data-effect="None" 
    data-color="yellow" 
    data-email="yourmail @mail.net" 
    data-theme-color="#383838">

 

Data Attributes

Available Settings

Description

data-deadline

Any date in provided format

Sets the date of project launch

data-effect

FadeIn, FadeInUp, SlideInDown, None

Sets content appear animation

data-color

yellow, green, orange, red ,blue

Sets color for main elements

data-email

Email in provided format

Sets the email where you will received messages when users contact you via the website

data-theme-color

Color in a HEX format

Sets extra colors for the elements on “our mission” page

 

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="Tauri - 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="tauri, premium template, HTML template, Dart Simple" />
<meta name="description" content="Tauri - Premium template by Dart Simple">

<!-- 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 Tauri 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.

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

Tauri - Premium template by Dart Simple
Copyright 2017

Table of contents
*/
/*
01. Fonts
02. Main menu
03. Header
04. Footer
05. Main Layout
06. Animations
07. Slider
08. Social menu
09. Modals
10. Customizer
11. Main layout set defaults

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

 

CSS3 Animation

Classes

Description

 

rotateCircle

Rotate effect

.preloader

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 plugin -->
<script type="text/javascript" src="assets/plugins/jquery.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="assets/plugins/jQuery/jquery.min.js"></script>
<!-- Validator Scripts -->
<script type="text/javascript" src="assets/plugins/jquery-validate/jquery.validate.min.js"></script>
<!-- Bootstrap Scripts -->
<script type="text/javascript" src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<!-- Owl Carousel Scripts -->
<script type="text/javascript" src="assets/plugins/owl.carousel/owl.carousel.min.js"></script>
<!-- Theme scripts -->
<script type="text/javascript" src="js/ds-scripts.min.js"></script>
<!-- Theme custom scripts -->
<script type="text/javascript" src="js/ds-custom.js"></script>

 

JavaScript folder structure and contents

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

 

JavaScript Plugins Initialization

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

Owl Carousel

{
    items: 1,
    singleItem: true,
    loop: false,
    nav: false,
    margin: 0,
    smartSpeed: 500,
    URLhashListener:true,
    startPosition: 'URLHash',
    onInitialized: function (event) {…},
    onTranslated  : function(event) {…}
}

 

jQuery Validate

{
    rules: {
        email: {
            required: true,
            email: true
        },
        name:{
            required: true
        },
        message:{
            required: true
        }
    },
    debug: true,
    errorLabelContainer: '#errorMsgBox',
    errorClass: 'error',
    errorElement: 'span',
    submitHandler: function (form) {…}
}

 

Callback Functions

Listed below are available callback functions and their relevant settings.

// Go to the next item
app.validate.init();
// inits validation plugin for all app.validate.el

app.owlInit();
//inits owl carousel 2

countDown.init();
//inits countdown 

 

Credits

JavaScript Plugins and Credits

OWL Carousel

Used for Brands Section Carousel

http://owlgraphic.com/owlcarousel/

jQuery Validate

Used for forms validating

https://jqueryvalidation.org/documentation/

Bootstrap

Used for Grid, Modals, Main fetures style

http://getbootstrap.com


JavaScript

CSS