Welcome to Phantasos!

Thank you very much for downloading the Phantasos Theme. This file will help you to set everything up accordingly.

You can use it however you want, but please don’t republish or redistribute the template (a mention or link is always appreciated).


Documentation Version 1.0

By: Gianluca Pirrera (socia.li or pirrera.ch)
Contact: hey@socia.li
Demo: http://socia.li/demo/phantasos

Table of contents


Package Contents


Installation

Installing the theme is really easy. All you need is the files in the HTML folder and a FTP client (we recommend Filezilla for that).
Connect to your server and just upload all the files in the HTML folder. That’s it, you’re done.


HTML Structure

    <!DOCTYPE html>
    <html>
    <head>
    <!-- CSS Files -->
    </head>

    <body>
    <!-- ========== Navigation ========== -->
    <!-- ========== Slider ========== -->
    <!-- ========== Section Entry ========== -->
    <!-- ========== Section Services ========== -->
    <!-- ========== Section Works ========== -->
    <!-- ========== Section CTA ========== -->
    <!-- ========== Section About ========== -->
    <!-- ========== Section Timeline ========== -->
    <!-- ========== Section Quotes ========== -->
    <!-- ========== Section Blog ========== -->
    <!-- ========== Section Contact ========== -->

    <footer>
    <!-- Javascript Files -->
    </footer>
    </body>
    </html>

Example

<div class="row works-hover">
    <div class="col-xs-12 col-lg-4 col-sm-4">
        <figure>
            <img class="img-responsive" src="img/works1.png" alt="Description" >
            <figcaption>
                <h3>Clock</h3><!-- Heading -->
                <p>Design</p>
                <a href="single.html" class="ajax-popup-link">View</a>
            </figcaption>
        </figure>
</div>

As you can see, the content (between the body tag) is divided into different sections. This makes it easier to find the stuff you’re looking for. The sections have the same name in the CSS file as well.


CSS Structure

> Navigation
> General Styles
> Section Entry
> Section Services
> Section Works
> Section CTA
> Section About
> Section Timeline
> Section Quotes
> Section Blog
> Section Contact
> Footer
> Popup
> Owl Carousel

Example

body,  p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #555555;
    -webkit-font-smoothing: antialiased;
}

Javascript Structure

> Message after contact-form submit 
> Loader
> Animation for loading portfolio content
> Initialize WOW (see plugins)
> Menu handling
> Smooth scrolling
> Magnific Popup (see plugins)
> Sliders
> Google Maps
> Parallax Backgrounds

Example

  // Toggle menu (slide-in/slide-out)
    $(".nav-btn").click(function () {
      $(".navbar").toggleClass('closed open');
      return true;
    });

Carousels

Phantasos has a set of carousels, to swipe through a lot of content. The setup is quite easy, just wrap your slides in the class=”owl-carousel”. With the id (example: id=”quote-slides”) you can customize each carousel differently (not only with CSS but also with Javascript, check out the options that are available.

<div id="quote-slides" class="owl-carousel">
    <div>Carousel slide one</div>
    <div>Carousel slide two</div>
    <div>Carousel slide three</div>
</div>

Morphing Devices

We added morphing devices in the services section. These devices completely coded in CSS will transform from iMac to iPhone depending on your screen size. You can change the images in the style.css file, a little example:

#device:before {
        top: 30px;
        margin: 0 -55px 0 0;
        height: 150px;
        width: 110px;
        background: url(../img/img_iphone.png) no-repeat center center; /* Change the image here */
        background-size:contain;
    }

You can also uncomment the code block on line 552 to have CSS-only content without any images!


Portfolio

Every portfolio item is loaded via Ajax and has its own HTML file. By clicking on the View button, the item is loaded. You can add anything you want in the portfolio file (check single.html or single_video.html). Make sure to add the class ajax-popup-link link in the example below:

> <a href="single.html" class="ajax-popup-link">View</a>

More Works

Want to show more portfolio items? We hide them behind the More? button and show them after clicking it. If you want to add more items, just open the more.html file and add your items accordingly.

Note: The portfolio items will not load on a local environment! This is normal.


Contact Form

<?php
    $name = $_POST['contact-name'];
    $email = $_POST['contact-email'];
    $message = $_POST['contact-message'];
    $from = $_POST['contact-email'];
    $to = 'you@domain.com'; // insert your Mail here
    $subject = 'Hello';
    $human = $_POST['human'];
?>

You’ll find the code for the contact form in the form.php file. All you have to do is to edit the to field on line 6 with your email address where you want to receive your mails.


Animations

We are using wow.js to trigger the animations when the content is in the viewport of the user. Check and test out the animations here. If you want to animate an element, just add wow and the animation name to the elements class.

Example: < img class=”wow fadeInUp” >

That’s it, really simple. You can animate every element you like :)


Parallax Backgrounds

We apply the parallax backgrounds to the <section> elements, here is a little example:

<section class="section-timeline" data-type="background" data-speed="10">

If you want to enable parallax on your section element, make sure to include the data-type="background"and the data-speed="10" for the speed of scrolling (you can change the speed if you like).


Retina Images

We have included a retina script that automatically looks for the higher quality image on retina devices. For example, if you have an image on your page that looks like this:

<img src="img/logo.png"

The script will check your server to see if an alternative image exists at /img/logo@2x.png. The retina image should always be twice the size as the normal image.


Google Maps

Edit your location in the script.js file on line 211 (this will help you out).
Edit the marker icon in the script.js file on line 254.


What we are using

Fonts

Font-Awesome: http://fortawesome.github.io/Font-Awesome/
Open Sans: http://www.google.com/fonts/specimen/Open+Sans
Raleway: http://www.google.com/fonts/specimen/Raleway

You’ll find Font Awesome in the CSS folder (font-awesome.min.css). Open Sans and Raleway are Google Fonts and can be changed with whatever font you would like to use (remember to change the font name in the style.css file).


Plugins

jQuery: http://jquery.com
Google Maps: https://developers.google.com/maps
Bootstrap: http://getbootstrap.com
Modernizr: http://modernizr.com
WOW: http://mynameismatthieu.com/WOW
Animate.css: http://daneden.github.io/animate.css
Owl Carousel: http://owlgraphic.com/owlcarousel
Magnific Popup: http://dimsemenov.com/plugins/magnific-popup
Retina JS: http://retinajs.com

End of documentation

Thanks again for downloading Phantasos!