Introduction
Thank you for purchasing this plugin. We covered almost everything in this document that how easily you can setup Paper. If you have any questions that are beyond the scope of this help file, please feel free to contact us..
Directory Structure
Download and extract zip files. You will find basic development structure like this.
- app
src
assets
partials
*.*_files.html
gulpfile.js
package.json
Partials
Paper is using partials folder to inject some common html files like header and footer.
_head.html |
Basic HTML meta tags and everything that could be in <head></head>
|
---|---|
_foot.html |
Body & wrapper close |
_header.html |
Main Navigation or menu |
_header.html |
Responsible for site pre header |
_footer.html |
Footer of your site. |
_script.html |
Responsible for all site scripts |
Installation
You may need following things to get started. Please download and install dependencies
To install paper please make sure you have installed node and gulp. Download Node
-
You can use any software of your choice to edit HTML files or use Download VS Code
Installing gulp 4 globally
You will need to remove your current gulp global package before installing v4 in order to do an upgrade.
Note: The $
shows the command is to be run on the
command line and shouldn’t be typed
$ npm rm -g gulp
$ npm install -g gulp-cli
This command removes your current global package and installs v4 from the gulp-cli 4.0 branch.
Make sure you don't get any errors from the first command before you type the second.
Depending on your set-up, you may need to run them with sudo
.
To verify what version you have installed globally, you can run the below command (and should see a similar output)
$ gulp -v
CLI version 1.2.1
Paper Setup
Its time to open Papert HTML app folder to your favourite editor. Its easy to use an editor which have terminal. Like VS Code or PhpStrom
First of all install all node modules by using this command:
$ npm install
After all node modules installation completed run
gulp watch
gulp watch will create a temporary folder with name of tmp
only change content in src folder tmp folder is just for preview.
Production Version
After all changes you need to create production version of your product
$ gulp production
Creating Minified Version
If you want a minified version then run
$ gulp production-min
Above command will create a new folder "dist" it will be fully optimized. It will compress and minify all of your html, css and js files. You can copy folder to your ftp or framework to use it.
Easy Deploy
If you are using version 1.5 or later you can use easy deploy option to upload all files to your ftp server with just one commnand.
Please make sure to run gulp watch first and make changes before you do this and you have to add your server details to upload file. Please open ftp.config and add your server details.
$ gulp deploy
Overlays
Adding overlay is pretty easy. Jus copy overlay div inside a relative section. Overlay is flexible you can change colors and direction as you want.
Overlay
<div class="overlay"
data-start="#f5abab"
data-end="#a86d07"
data-orientation="tobottom"
data-opacity=".5">
</div>
data-start |
Start Color |
---|---|
data-end |
End Color |
data-orientation |
Orientation |
data-opacity |
Overlay Opacity |
Smooth Scroll
You can make any URL to work for smooth scroll. It only work inside a page. Useful for single page website. For demo you can check sidebar of this documentation page. Just add a scroll class to make it work.
<a href="#section-id" class="scroll">Go To Section></a>
or for more than one url
<div class="scroll">
<a href="#section-id">Go To Section></a>
</div>
Sticky Item
To make an item sticky add sticky class
<div class="sticky">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad architecto asperiores dolor ea exercitationem hic ipsam iusto maiores natus nulla numquam perspiciatis quasi quis recusandae, reiciendis rerum similique ut.
</div>
Charts
Paper is using chart.js you may need to check chart.js documents to make modifications.
<canvas class="chart"
data-type="pie"
data-labels="HTML,WordPress,Laravel"
data-values="12, 19, 16"
width="400"
height="400">
</canvas>
You can use above markup at charts. Change type if you want.
Contact Form
Please make sure you have change email in contact form for this you need to edit "assets/php/submit.php" add your email
$your_email="your_email@site.com";
You can also add more options if you want or change email template.
Google Map
You need a google Map API to display map on your website. Please click below button to get more information that how you can generate API key.
How to Get Google Map API Key ?Add following code where you want to display map.
<div data-id="contact-map" class="g-map" data-address="new york" data-zoomlvl="16"></div>
Change Map Location or Address
Please add your address in address data attribute. for example
data-address="new york"
data-address |
Pin Address Location |
---|---|
data-zoomlvl |
Change Map Zoom Level for example: data-zoomlvl="16" |
data-maptype |
Change map type for example data-maptype="satellite" |
data-map-pin |
To Change map pin add full path |
Compress Images
To speed your site you may need to compress some of your images. For that run command:
$ gulp img-compress
images in demo folder will be compressed only. you must first create production version. you can change folder name in gulpfile.js if you want.
Credits
- Twitter Bootstrap, its recommended to see visit bootstrap docs
- Jquery – JS library
- Generating Fonts Package
- Flat Icon for various fonts
- Unsplash Images
- Gulp
- NodeJS
- https://dribbble.com/shots/3497223--Free-PSD-Samsung-Galaxy-s8-Mockup
- https://drive.google.com/drive/folders/0ByYJdeOAU2QbU1hXcDdHc2xWWnc