CHATEAU HTML TEMPLATE DOCUMENTATION

Table of contents

1. What's included
2. HTML Structure
	2.1 Head
	2.2 Body
3. Parallax
4. On-scroll effects
5. Swiper Slider
6. Isotope
7. Plug-ins and other references

1. What's included

Once downloaded and unzipped the chateau-master.zip package you will find in the main folder the following contents:

chateau-master/
├── bootstrap/
│   ├── css/
│   │   ├── bootstrap.css
│   │   └── bootstrap.min.css
│   └── js/
│       ├── bootstrap.js
│       └── bootstrap.min.js
├── dev/
│   ├── chateau-script.js
│   └── chateau-theme.less
├── doc/
│   └── documentation.pdf
├── images/
│   └── …
├── src/
│   ├── css/
│   │   ├── animate.css
│   │   ├── chateau-theme.css
│   │   ├── font-awesome.css
│   │   ├── swipebox.css
│   │   ├── swiper.min.css
│   │   └── winemaker-theme.css
│   ├── fonts/
│   │   └── …
│   └── js/
│       ├── chateau-script.js
│       ├── winemaker-theme.js
│       ├── jquery.swipebox.min.js
│       ├── swiper.jquery.min.js
│       ├── isotope.pkgd.min.js
│       ├── jquery-1.11.3.min.js
│       ├── jquery.stellar.js
│       ├── jquery.waypoints.min.js
│       ├── sticky.js
│       └── modernizr-2.6.2.min.js
├── blog-entry-alternative.html
├── blog-entry.html
├── blog-masonry.html
├── blog-standard.html
├── buy-online.html
├── cart.html
├── contact.html
├── elements.html
├── faq.html
├── gallery.html
├── homepage.html
├── login.html
├── our-history.html
├── product-sheet.html
├── products.html
├── register.html
├── the-vineyard.html
└── who-we-are.html

Let’s see what’s inside.

/boostrap
Chateau HTML Template is build on the powerful bootstrap framework. This folder contains the js and css bootstrap core files. These files should not be modified in order to preserve Bootstrap core functions. We’ll see later which files to modify if you’d like to edit Chateau HTML Template

/dev
If you’re familiar with LESS and css or js processors, here are the files for you. Once compiled chateau-theme.less will generate a chateau-theme.css file. You will clearly find the compiled version, on which we performed a bunch of extra controls, such as autoprefixer to automatically generate some required vendors css prefixes.

/doc
This folder contains help files and documentations

/images
Due to rights limitations, we could not include images in the master package. In this folder you’ll find some placeholder images. Refer to the demo version if you wish to see pages with real photos.

/src
This folder contains the main theme files: css, js, fonts. We’ll see later each one in details.

2. HTML Structure

Chateau HTML Template is a Based on Bootstrap 3.0. Bootstrap documentation can help you on customize html & grids & layouts. Here’s an overview of how the pages main structure

2.1 Head

<head>
<title>Chateau</title>

<!-- meta -->
<meta charset="utf-8">
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<!-- css -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="src/css/font-awesome.css" rel="stylesheet">
<link href="src/css/animate.css" rel="stylesheet">
<link href="src/css/swipebox.css" rel="stylesheet">
<link href="src/css/swiper.min.css" rel="stylesheet">
<link href="src/css/chateau-theme.css" rel="stylesheet">

<!-- google fonts -->
<link href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Merriweather:300,400,700,900,900italic,700italic,400italic,300italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">

<!-- head js -->
<script src="src/js/modernizr-2.6.2.min.js"></script>
</head>

Meta tags
The first group of tags you will find in the head section of each page is meta. Write your description as you wish. 

Css includes
Next you will find css, 6 in total. The file bootstrap.css is the core bootstrap file. As said above, do not modify it.
Right after there is font-awesome.css, the icon font included with Chateau HTML Template.
The animate.css file is in charge of animating elements with some nice effects.
Swipebox is a lightbox jQuery plugin, and swipebox.css is its style.
Swiper is another cool jQuery plugin to create fluid carousels and sliders.

Google Fonts
We choose for Chateau HTML Template three among the best google fonts. If you need more info about Google Fonts, refer to official documentation.

Modernizr
This library let us safely use HTML5 even with browsers that do not fully support it.

2.2 Body

Each page contain two main block elements.

<aside id="side-nav"> … </aside>
<div class="container-fluid" id="main-container"> … </div>

	▪	The first one contains the slide-in right side secondary navigation. You can open/close it by clicking on the three vertical dots icon on the top right corner of the page.
	▪	The second one, as it name suggests, it is the main container. You can easily switch between fixed or fullwidth layout by simply changing the bootstrap class “container” (for fixed width) or “container-fluid” (for full-width).

The main container often conatains one ore more section tags, in depends of each page, which organize the content in an ordered manner.
To the very bottom of each page, you will find the rest of the js scripts to make things work:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">if (!window.jQuery) { document.write('<script src="src/js/jquery-1.11.3.min.js"><\/script>'); }</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/js/jquery.swipebox.min.js"></script>
<script type="text/javascript" src="src/js/jquery.stellar.js"></script>
<script type="text/javascript" src="src/js/swiper.jquery.min.js"></script>
<script type="text/javascript" src="src/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="src/js/sticky.js"></script>
<script type="text/javascript" src="src/js/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="src/js/chateau-script.js"></script>

First things first, we include a cdn version of jQuery. We also specify a fallback version of it in case o connection issues. Then we included the core bootstrap.js file. Following you will see the entire lists of plugins included, already discussed in the css paragraph. Additionally, you will find these plugins:
	▪	stellar.js - to add parallax effect
	▪	waypoints.js - to trigger scroll events
	▪	sticky.js - an extension of waypoints to add sticky header functions
	▪	isotope.js - to create masonry and filtrable layouts
	▪	google maps api - to add google maps to Chateau HTML Template

3. Parallax

Parallax in one of the cool feature of Chateau HTML Template. You can easily manage parallax background images. Check out this piece of code, taken from line 271 of home page:

<section class="section-photo parallax color-light" data-stellar-background-ratio="0.5" style="background-image:url('http://placehold.it/2000x1000')">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
<h2><em>Our Manor</em></h2>
<h3>In the heart of napa valley</h3>
            </div>
        </div>
    </div>
    <div class="overlay"></div>
</section>

We added a parallax class to style it properly and then specify two attributes. The first is the speed of relative scrolling, that we set to 0.5, so the half of normal scroll speed. The second is obviously the background image, that we set with an inline style, but you’re free to create a class or and id style for it.

4. On-scroll effects

On-scroll effects let you trigger when an element appear in the viewport and animate it with one of the effects of animate.css library. Check out this piece of code, taken from line 251 of home page:

<div class="col-sm-4">
	<img alt="" class="img-responsive img-thumbnail mar-v os-animation" data-os-animation="fadeInLeft" data-os-animation-delay="0s" src="http://placehold.it/720x720">
</div>

What we are basically do here, is telling the image to appear with a fade in from left effect, when it enters the viewport. To achieve this effect we add an os-animation class and specify two other attributes. The first is the animation itself, taken from animate.css library. The second is the delay - in seconds - to start the animation, 0s in this case. The waypoint.js plugin will take care to trigger when an element containing an os-animation class will enter the viewport and properly start the animation by adding an animated class. Pretty cool!

5. Swiper Slider

Swiper slider let you create beautiful and responsive carousels and responsive sliders. All you have to do is create a structure like this:

<!-- Slider main container -->
<div id="swiper-1" class="swiper-container">

    <!-- Required wrapper -->
    <div class="swiper-wrapper">
    
        <!-- Slides -->
        <div class="swiper-slide" id="slide-0">
	…
        </div>

        <div class="swiper-slide" id="slide-1”>
	…
        </div>

        <div class="swiper-slide" id="slide-2”>
	…
        </div>

        <div class="swiper-slide" id="slide-3”>
	…
        </div>

    </div>
    
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- Navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
</div>
<!-- /#swiper-1 -->

You have a swiper-container that contains a swiper-wrapper, which itself contains all the swiper-slide class elements. Than you’ll have to style it properly, but you’ll find two coded example with Chateau HTML Template. 
	▪	The first is the home page swiper
	▪	The second is in the gallery page. You can also add “on slide change” effects. To do it, take advantage of the home page swiper. See the following code, taken from line 151 of home page:

<h1 class="color-light" data-animation="animated bounceInDown">Award winning</h1>
<span class="separator" data-animation="animated bounceInLeft"></span>
<p class="color-light" data-animation="animated bounceInUp">
…
</p>

Thanks to the data-animation attribute we can easily add on slide change effects. All you need to do is add animated value followed by the class name of an animate.css library effect.

6. Isotope

You can find an example of isotope application in two pages: products.html and blog-masonry.html. To create a masonry page check this code:

<!-- Filters -->
<ul id="secondary-nav" class="nav navbar-nav isotope-filters">
    <li class="active"><a data-filter="*">All products</a></li>
    <li><a data-filter=".red-wines">Red Wines</a></li>
    <li><a data-filter=".white-wines">White Wines</a></li>
    <li><a data-filter=".rose-wines">Rosé Wines</a></li>
    <li><a data-filter=".food-specialties">Food Specialties</a></li>
</ul>

This part above let us create the filter nav. We use a data-filter attribute containing the class of the grid item to correctly filter it.
Then the grid itself:

<!-- Grid -->
<div class="isotope-grid">
	<div class="isotope-gutter-sizer"></div>
	<div class="isotope-grid-sizer"></div>

	<div class="isotope-grid-item isotope-grid-item-height2 red-wines">
...
	</div>
	<div class="isotope-grid-item white-wines">
...
	</div>

	...

</div><!-- /.isotope grid-->

We specify required containers, then add isotope-grid-item to each element. In addition we add an auxiliary class to make the filter works. In this case red-wines and white-wines. We’re also crate a class to double the height of some items (.isotope-grid-item-height2), to achieve a true masonry layout. Then, at the bottom of the page, the script.

<script>

$(document).ready(function() {

/* ISOTOPE */

function getHashFilter() {
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

var $grid = $('.isotope-grid');

// bind filter button click
var $filterButtonGroup = $('.isotope-filters');
$filterButtonGroup.on( 'click', 'a', function() {
var filterAttr = $( this ).attr('data-filter');
// set filter in hash
location.hash = 'filter=' + encodeURIComponent( filterAttr );
});

var isIsotopeInit = false;

function onHashchange() {
	var hashFilter = getHashFilter();
	if ( !hashFilter && isIsotopeInit ) {
	  return;
	}
	isIsotopeInit = true;
	// filter isotope
	$grid.isotope({
	  itemSelector: '.isotope-grid-item',
	  masonry: {
columnWidth: '.isotope-grid-sizer',
gutter: '.isotope-gutter-sizer',
isFitWidth: true     
},
	  filter: hashFilter
	});
	// set selected class on button
	if ( hashFilter ) {
	  $filterButtonGroup.find('.active').removeClass('active');
	  var $current = $filterButtonGroup.find('[data-filter="' + hashFilter + '"]');
	  $current.parent().addClass('active');
	}
}

$(window).on( 'hashchange', onHashchange );

// trigger event handler to init Isotope
onHashchange();

}); 

</script>

You’ve seen in the piece of code above, we specified all the class used in the html to make things work properly. The code above let us specify gutter and column size directly via css, so we can easily manage the page design all from css, without worrying about spacing specified in js code. In addition, this piece of code let us apply filters by reading the hash in the url.

7. Plug-ins and other references

Here are a full list of plugins and references used to build this theme

	▪	Animate				https://daneden.github.io/animate.css/
	▪	Bootstrap			http://getbootstrap.com
	▪	Google Fonts			https://www.google.com/fonts
	▪	Isotope				http://isotope.metafizzy.co
	▪	jQuery				https://jquery.com
	▪	Modernizr			http://modernizr.com
	▪	Stellar 				http://markdalgleish.com/projects/stellar.js/
	▪	SwipeBox			http://brutaldesign.github.io/swipebox/
	▪	Swiper				http://www.idangero.us/swiper/
	▪	Waypoints			http://imakewebthings.com/waypoints/

Credits:
	▪	The video used in the homepage has been taken from coverr.com here is the link of the license: https://creativecommons.org/publicdomain/zero/1.0/