REBUILD V1.0

Construction HTML Template

If you can read this then it mean you have purchased this theme. Great Thanks for buying this theme and we are happy to support you for any further requests. Please be free to email via our user page contact form or to our support forum at http://www.janxcode.com.

Files Structure

- php All php helper files such as contact us page.
- images All used images (jpeg, png).
- js Js Template.
- vendor Javascript library.
- Fonts Fontawesome icons, Google Fonts .

 

HTML Structure

The template is based on Skeleton Framework - http://getskeleton.com

The grid is a 16-column fluid grid with a max width of 1200px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. .
 

Basic HTML Markup

<div class="row">
    <div class="sixteen columns">
        sixteen columns
        <div class="row">
            <div class="two columns">Two</div>
            <div class="ten columns">Ten</div>
        </div>
    </div>
</div>

Edit Page Content

How to edit Page Title?



How to edit Header Logo?



How to edit Menu Title and Link?



How to edit Footer Logo?



CSS Structure

CSS folder consists of all styling related codes.
These are the CSS file we're using in the template:

- skeleton.css - (Sixteen columns grid style)
- style.css - (The basic layout structure styles)
- custom.css - (The basic layout structure styles)
- animate.css - (Animate elemnts)
- theme-elements.css - (Elements such as sliders, boxes, titles, etc...)
- responsive.css - (Responsive styles for template elements for adapting different mobile and tablet sizes)
- Skins - (Theme Color)

 

Javascript

jQuery - is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

More information avaliabel at http://jquery.com

Customization & Styles

Colors

The style switcher was made to support unlimited skin colors, for that we use Less (http://www.lesscss.org/) to process the CSS dinamically in the demo and show the color right away.
You don't need to use LESS in your project, after you done customizing your skin you may want to grab the generated code and save it in a file in the folder: /css/skins/(skin-name).css
 

Layout Style

The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the <body>:

<body class="boxed">


You can also customize the background color or image.
 

Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag:

 <link href="http://fonts.googleapis.com/css?family=Raleway:400,700,600,500,300" rel="stylesheet" type="text/css">

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

Icons

Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

If you need more information, please visit this site: http://fontawesome.io/

 

HTML Markup:

<i class="icon-desktop"></i>
<i class="icon-heart"></i>
...

 

Sliders

Home Slider

    
Revolution Slider

Slider Revolution is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!

More details on http://themes.themepunch.com/?theme=revolution_jq

 

Flex Slider

Flexslider an awesome, fully responsive jQuery slider toolkit.
Flexslider is a simple slideshow script but with lots of options. You can find more documentaion here http://www.woothemes.com/flexslider/
It has many features to show slideshows and slide contents. Just with few codes and class names u can have different version of slidershow. It has different slide options like Fade, Horizontal slide, and Vertical slide.

Filtering

The filter is driven by the Isotope script - http://isotope.metafizzy.co/

Here's an example of usage:


Filter Options:

<div class="jx-portfolio-filter">
    <a data-filter="*" class="current" href="#">Show All</a></a>
    <a data-filter=".leadership" href="#">Leadership</a>
    <a data-filter=".marketing"  href="#">Marketing</a>
    <a data-filter=".development"  href="#">Development</a>
    <a data-filter=".design" href="#">Design</a>
</div>


Filter Data:

<div class="jx-portfolio-filter" >
                       <a href="#" data-filter="*" class="current">All</a>
                       <a href="#" data-filter=".graphic">Graphic</a>
                       <a href="#" data-filter=".design">Design</a>
                    </div>
                    
                    <div class="jx-portfolio">
                        
                        <div class="item item-h2 item-w2  design all">
                            <img src="images/portfolio-1.jpg" alt=""/>
                            <div class="jx-img-hover">
                                <div class="jx-hover-bottom">
                                    <div class="jx-portfolio-icon">
                                        <i class="fa fa-photo"></i>
                                    </div>
                                    
                                    <div class="jx-content">
                                        <div class="jx-portfolio-title">Lorem ipsum dolor sit amet, consectuar adipi</div>
                                        <div class="jx-portfolio-like">
                                            <i class="fa fa-heart"></i>
                                            <span>23</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="jx-hover-top">
                                    <a class="jx-portfolio-scale" rel="prettyPhoto"><i class="fa fa-search"></i></a>
                                    <a class="jx-portfolio-link"><i class="fa fa-plus"></i></a>
                                </div>
                                                 
                            </div>
                            <!-- Image Hover Effect --> 
                        </div>
                        <!-- Item#1 -->
    .....

 

PHP Scripts

You only will need php to run contact form to send email through built in form. For that you need to install server on your localhost machine or directly host your files in avaliable shared hostings:

$to = 'you@domain.com';

Social Media - Icons

Here's the css classes of the available social media icons in the template:

Animation

You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.
 

Usage:

<div class="... animatedParent">
    <div class="jx-animate" data-add="visible animated fadeInLeft" data-offset="10" data-repeat="false" data-scrollHorizontal="false">
        ...
    </div>
</div>


Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.

The animation can be set to:

Source & Credits


Images: http://photodune.net/
Google Fonts - http://www.google.com/webfonts
Icons Font-face - http://fontawesome.io/
jQuery - http://www.jquery.com/
Revolution Slider - http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Modernizr - http://modernizr.com/
jQuery gMap 2 - Google Maps API V3 - http://labs.mario.ec/jquery-gmap/
Respond.js - https://github.com/scottjehl/Respond
Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
prettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Jquery Validate - http://bassistance.de/jquery-plugins/jquery-plugin-validation/


Janxcode Themes