Thank you very much for purchasing Dedafo, an HTML5 + CSS3 Multi page template featuring unique, creative, responsive design.
Dedafo is a template that focuses on emotion with a modern, elegant and clean design. It is powered by jQuery and the code is clearly written and you will find comments for each section part.
This template has been tested to work best with Microsoft Edge, latest versions of Mozilla Firefox, Google Chrome, Safari, Android and iOS mobile browsers.
Support requests can be requested via the the comments section at ThemeForest, or a direct mail to envato@bepd.dev
When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.
Dedafo template contains 22 html files and 1 php file. These versions are:
Each html file is fully ready for production.
Analyze tags, taking as example the index-minimal.html file.
Based on Bootstrap, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options. For more informations read this.
For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns remembering that it is a 12 columns grid.
In folder "css" you will find 1 CSS files an one folder
The folder sass contain the file style.scss
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
At the beginning of the _vars.scss file you have variables where to set the font, colors etc.
In folder "scss" you will find 21 SCSS files
Every files contain different style for every Template Components
In folder js you will find 13 javascript files and one folder.
Google Maps is for developer purposes only. You have to insert your API Key. Please follow this procedure:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=false"></script>
Several features have been implemented. Each is well commented and can be used either in its one page and multi page. You can find most of elements code ready to use in style-guide.html and in plugins.html
Every section on every page can easily been copy and paste in a different page
Add this data-attribute to create easily custom padding and margin (top and down)
<div data-padding="none">
Padding Top 0px and Padding Bottom 0px
<div data-padding-top="none">
Padding Top 0px
<div data-padding-bottom="none">
Padding Bottom 0px
<div data-padding>
Padding Top 100px and Padding Bottom 100px
<div data-padding="top">
Padding Top 100px
<div data-padding="bottom">
Padding Bottom 100px
<div data-padding="xl">
Padding Top 175px and Padding Bottom 175px
<div data-padding="xltop">
Padding Top 175px
<div data-padding="xlbottom">
Padding Bottom 175px
<div data-padding="lg">
Padding Top 150px and Padding Bottom 150px
<div data-padding="lgtop">
Padding Top 150px
<div data-padding="lgbottom">
Padding Bottom 150px
<div data-padding="md">
Padding Top 120px and Padding Bottom 120px
<div data-padding="mdtop">
Padding Top 120px
<div data-padding="mdbottom">
Padding Bottom 120px
<div data-padding="sm">
Padding Top 70px and Padding Bottom 70px
<div data-padding="smtop">
Padding Top 70px
<div data-padding="smbottom">
Padding Bottom 70px
<div data-padding="xs">
Padding Top 50px and Padding Bottom 50px
<div data-padding="xstop">
Padding Top 50px
<div data-padding="xsbottom">
Padding Bottom 50px
<div data-padding="col">
Padding Top 15px and Padding Bottom 15px
<div data-padding="coltop">
Padding Top 15px
<div data-padding="colbottom">
Padding Bottom 15px
You can use the same code replacing data-padding
with data-margin
Add this classes to change the font weight:
<p class="f300">Example<p>
Font Weight 300
<p class="f400">Example<p>
Font Weight 400
<p class="f500">Example<p>
Font Weight 500
<p class="f600">Example<p>
Font Weight 600
<p class="f700">Example<p>
Font Weight 700
<p class="f800">Example<p>
Font Weight 800
<p class="f900">Example<p>
Font Weight 900
You can use the same code replacing p
with h1,h3,h3 etc.
Add this data-attribute to create easily custom background-color:
<div data-bg="primary"><div>
Background color primary color (set on _var.scss)
<div data-bg="secondary"><div>
Background color secondary color (set on _var.scss)
<div data-bg="dark"><div>
Background color dark color (set on _var.scss)
<div data-bg="template"><div>
Background color template color (set on _var.scss)
<div data-bg="grey"><div>
Background color grey color
<div data-bg="white"><div>
Background color white color
There are several layouts for the portfolio. Below we are listed all with different html shortcode to set them (see more on plugins.html):
3 columns (you can use data-isotope-columns in every style)(need element class):
<div data-isotope="masonry" data-isotope-columns="three">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
</div>
4 columns (you can use data-isotope-columns in every style)(need element class):
<div data-isotope="masonry" data-isotope-columns="four">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
</div>
Filter + wrapper with elements (need element class):
<div data-isotope-filters>
<ul>
<li data-filter="*"> All
</li>
<li data-filter=".grey"> Grey
</li>
<li data-filter=".dark"> Dark
</li>
</ul>
</div>
<div data-isotope="fmasonry" data-isotope-columns="three">
<div class="row">
<div class="element grey">
</div>
<div class="element black">
</div>
</div>
You can use data-isotope-columns="three" or data-isotope-columns="four" in every style(need element class):
<div data-isotope="fitRows" data-isotope-columns="three">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
</div>
Filter + wrapper with elements (need element class):
<div data-isotope-filters>
<ul>
<li data-filter="*"> All
</li>
<li data-filter=".grey"> Grey
</li>
<li data-filter=".dark"> Dark
</li>
</ul>
</div>
<div data-isotope="load-simple" data-isotope-columns="three">
<div class="row">
<div class="element grey">
</div>
<div class="element black">
</div>
</div>
Working Contact Form (only contact form page).
If you add more field you have to modify the form.js and contact.php files.
Works only on server with PHP (4,5,7). Not work on local without a LAMP virtual machine.
This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them.
You have to add data-attr to images
You have to include data-src for the image source and data-src-retina for retina(2x) image source
<img data-unveil data-src="img.png" data-src-retina="img@2x.png">
Small library to animate elements on your page as you scroll (see plugins.html).
All you have to do is to add data-aos attribute to html element, like so:
<img data-aos="animation_name">
Animation Name (some examples)
fade, fade-up, fade-down, fade-left, fade-right, zoom-in, zoom-out
Advanced settings (only some)
data-aos-delay, data-aos-duration, data-aos-one
We used the following images, files, resources:
Thank you for purchasing this Template. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
If you are satisfied with Dedafo please go to your downloads section on ThemeForest.net and rate Dedafo with 5 stars. Otherwise we will be happy to help you find a solution.
We hope you enjoy the design and functionality of Dedafo and if you have tips or functionality to be developed for the next release we are at your disposal.
Kind Regards,
bepd