Vanille

Vanille

Package files content.

The package you downloaded from themeforest include the following structure:


img

The main HTML file is index.html will open the homepage.

Different usage of this mobile template

This mobile template can be used to create a mobile website, a web app, and a native app. Depending on your needs you can use this layout to create the desired final product.

Creating a mobile website, redirecting from your desktop website to the mobile one

You can use this template to create a mobile version of your website. Considering that you main desktop website is not responsive or you want a separate mobile version of it, Vanille is a perfect solution to do that.

To create a separate mobile version of your website using this template will require to create a subdomain or a subfolder of your domain (mobile.yourwebsite.com or m.yourwebsite.com) where the main files will be copied.

To redirect users to your new created mobile website you will need to use a redirection code. First you need to add a mobile detection code, and then redirect mobile users to the mobile url.

For more information about mobile detection and redirection check THIS WEBSITE.

Converting it into a native app

To convert this template into a native app you will need to use solutions like phonegap.

"Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript .

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. "

More about phonegap on their WEBSITE

Index page structure

The main page of this template is index.html file. This is the homepage of your website, the first page the browser will open when users will access your website.


<body class="color-theme-red">
	<div id="app">
		<div class="statusbar"></div>
		
		

		<div class="view view-main view-init ios-edges" data-url="/">
			<div class="page no-navbar">
			
				<div class="page-content">

					<!-- Page Title -->
					<div class="page-title-wrapper">
						
					</div>
					<!-- /Page Title -->
					
					<!--Page Content -->
					
					<!--/Page Content -->

				</div>
			</div>
		</div>

</body>

Blank page structure

<div class="page no-navbar">
	<div class="page-content">
		<!-- Page Title -->
		<div class="page-title-wrapper">
			<div class="page-title">
				<h1>Blank</h1>
			</div>
			<a href="#" class="panel-open" data-panel="left"><i class="material-icons">menu</i></a>
		</div>
		<!-- /Page Title -->
		
		<div class="padding-left padding-right padding-bottom">
			<div class="section-content padding-top">
				<!-- Content -->
				<!-- /Content -->
			</div>
		</div>
	</div>
</div>

CSS Files

The Vanille template use app.css as the main CSS FILE

At the top of the style.css file there is a "Table of Contents" list that will guide through the CSS code.

/*==============================================
[Main stylesheet app.css]

Author:			WM_Team
Version:		1.0
Created:		28 September 2018
Last updated:		03 October 2018
Template:		Vanille - Restaurant Reservations & Food Delivery
================================================*/
/*
[Table of Contents]

01. GENERAL
02. HOMEPAGE
03. RESTAURANT DETAIL
04. RECIPE DETAIL
05. FOOD DETAIL
06. CHECKOUT
07. PROFILE
08. LOGIN & REGISTER
09. PAGES LIST
10. THEME DARK
*/

Vanille use another css files:

framework7.md.min.css file is the script CSS we are using to create the main functionality of the pages. WE RECOMMEND NOT TO EDIT THIS.

icons.css used to display Icons

JavaScript Files

The template includes more javascript files which are loaded at the end of each index file

<script src="js/framework7.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>

1.framework7.min.js

Main core functions for the pages and layout

2.routes.js

JS File to initialize all routes in the app

3.app.js

Custom functions of the template.

Step by step example of adding new icons

1- Find and download SVG icons from any website like Flaticon and choose your new icons that you want add them to existing icons. For example I will add car and pizza icons.

2- Download the icon as SVG format. Extract the content of the file zip downloaded on your computer hard drive.

3- Open Icomoon app, click the Import Icons button,

4- browse to the SVG folder of the extracted ZIP content, select the icon and import

5- browse to the fonts folder in Vanille Project (fonts/Flaticon.svg) to merge the existing icons with the new downloaded.

6- Rename all existing Icons with the same name as named before. (Important)

7- Select the icons and click the Generate font button.

8- Edit the name of the font and prefix class (Important) and download

9- Extract the content of the file zip downloaded on your computer hard drive and open style.css

10- Open the fonts folder in Vanille Project and open flaticon.css

11- Replace the lines.

12- Replace the new font generated by the new one.

Watch the video

Sources and Credits

CREDIT SCRIPTS

CREDIT IMAGES

NOTE: *All images are not included in the main files only to demo