Dedafo

Dedafo - Creative Agency, Studio, Sass, Minimal HTML Template

Introduction

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.

Browser Compatibility

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

Support requests can be requested via the the comments section at ThemeForest, or a direct mail to envato@bepd.dev

Features

  • Responsive Design. Desktop, Tablet and Mobile.
  • Multi pages
  • Build with Bootstrap 4
  • Modular Components
  • 4 Homepages demos
  • Swiper
  • Isotope
  • Sass
  • Support embed videos from Youtube, Vimeo.
  • 20 Html ready files

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

  • Html - Main folder for template
  • Documentation - Documentation for site template

HTML Structure

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.

  • Main Wrap: website container
  • Header & Menu: header with logo in the left and menu in the right
  • Menu CTA: CTA button on the menu
  • Hamburger Menu: menu button
  • Mobile Menu: menu on mobile
  • Page Header: the page header
  • Page Content: contains all the page section (ex. Portfolio Section)
  • Footer: the footer

Grid

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.

CSS Files and Preprocessor

In folder "css" you will find 1 CSS files an one folder

  • Bootstrap folder
  • style.css

Description

  1. style.css: main stylesheet. It contains all of the specific stylings for the template. Each section can be identified by a tag.
  2. Bootstrap folder : only the bootstrap css grid style.

SASS

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.

  • $primary-font: the main font
  • $secondary-font: title font
  • $paragraph-font: font of paragraphs
  • $primary-color, $primary-color-light: main color
  • $secondary-color, $secondary-color-2: secondary color
  • $paragraph-color, $paragraph-color-light: paragraph color
  • $grey-bg, $template-bg, $dark-bg: main background color
  • template colors, default colors: all the modular Components color

In folder "scss" you will find 21 SCSS files

Every files contain different style for every Template Components

  • _reset: the reset styles
  • _print: print styles
  • _fonts: icon font styles
  • _core: core styles (like header, paragraph..)
  • _bootstrap: grid styles see here
  • _elements: all modular components styles
  • _owl: owl js library styles
  • _swiper: swiper js library styles
  • _magnificpopup: magnific popup js library styles
  • _aos: aos js library styles
  • _carousel: other custom styles for js library
  • _masonry: other custom styles for masonry/isotope js library
  • _buttons: buttons styles
  • _form: form styles
  • _pageheader: page header styles
  • _footer: footer styles
  • _template: custom template styles

JavaScript

In folder js you will find 13 javascript files and one folder.

  • jQuery: jquery.min.js. Library A Javascript library that greatly reduces the amount of code that you must write.
  • Images Loaded: imagesloaded.min.js. Library Used for portfolio images.
  • Isotope: isotope.min.js. Library Used for portfolio with filters More info
  • Swiper: swiper.min.js. Library Used for Slider. More info
  • Owl Carousel: owl.carousel.min.js. Library Used for carousel in team, testimonial etc. More info
  • Magnific Popup: jquery.magnific-popup.min.js. Library Use for iframe, images popup. More info
  • Unveil: unveil.min.js. Library Use for image lazy loading. More info
  • Aos: aos.js. Library Library for the animations More info
  • Menu: menu.js. Template js Used for the menu.
  • Masonry: masonry.js. Template js Used for Isotop/Masonry Elements.
  • Elements: elements.js. Template js Used for the modular components.
  • Carousel: carousel.js. Template js Used for the slider and carousel components.
  • Maps: maps.js. Template js Settings for google maps.
  • Form: form.js. Template js Settings for the contact form.

Google Maps API Key

Google Maps is for developer purposes only. You have to insert your API Key. Please follow this procedure:

  • Go to: Google API KEY Documentation
  • Follow the instructions and create your API Key
  • At the bottom of the contact html code you can find this code:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
  • You have to insert you api key like:
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=false"></script>

Elements, Shortcodes and Functionalities

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

  • Accordion
  • Tabs
  • Buttons
  • Info Components
  • Icon Components
  • Pricing
  • Images Grid
  • Testimonials
  • Sliders
  • Icons
  • Lightbox Gallery
  • Lightbox Video
  • Lightbox Maps
  • Lazy Load Images See here
  • Masonry / Isotope components See here
  • Scroll Animations See here
  • Contact Forms (works only online) See here
  • Google Maps
  • Title sections
  • Padding, margin classes See here
  • Font weight classes See here
  • Background classes See here
  • Others

Padding, margin classes

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

Font Weight classes

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.

Background classes

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

Masonry / Isotope

There are several layouts for the portfolio. Below we are listed all with different html shortcode to set them (see more on plugins.html):

Masonry

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>

Filterable Masonry

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>

FitRow

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>

Filterable FitRow

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>

Contact Form

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.

Contact.php

You can set custom vars for the form messages (errors and success)

define("__TO__","hello@mail.com")

You have to replace hello@mail.com with your mail (you will receive the mail send by the contact form at this address)

Lazy Load Images

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">

Animate On Scroll Library

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

Sources and Credits

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