File Structure

Required Files

This product requires the following CSS files:

Development
								
									<link rel="stylesheet" href="css/timber.css" />
									<link rel="stylesheet" href="css/avalanche.css" />
									<link rel="stylesheet" href="css/snowbridge.css" />
									<link rel="stylesheet" href="css/summit.css" />
									<link rel="stylesheet" href="css/templates.css" />
									<link rel="stylesheet" href="css/skin.css" />
								
							
Production
								
									<link rel="stylesheet" href="css/core.min.css" />
									<link rel="stylesheet" href="css/skin.css" />
								
							

IMPORTANT: To ensure that your changes are not overwritten with product updates, edit and/or overwrite any styles in css/skin.css only. Do not edit the framework, plugin or template stylesheets. If there is a particular section you want to change but it does not appear in css/skin.css, simply copy and paste it into css/skin.css.

This product requires the following JS files:

Js
								
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
									<script type="text/javascript" src="js/timber.master.min.js"></script>
								
							

Note: timber.master.min.js contains all required plugins and now all necessary template calls and custom template functions in order to reduce the number of JS calls. Modify template futions in js/template-functions.js. Minimize the script and repace the code on line 254 of js/timber.master.min.js. For a JS minifier click here.

Special Template CSS Classes

Scrolling to Section

You can scroll to any section within a page from any link or main menu item. This is done by adding the .scroll-link class to the link you want to fire the scroll to action

Example

You will also need give the section to which you are scrolling to the same id that was defined in the href of the "scroll-link".

Example
								
									
...

Use the data-offset attribute to position the target section a bit further down or up on the page. The data-offset takes positive/negative values and represents pixels.

Example

Important: If using the "scroll-link" class on main menu links in order to scroll between different sections within the page, keep in mind to link to at least two sections. This way the script will automatically check when each section comes 60% into view and swap the active main menu item. When a section enters into view it receives the class "in-view".

Turn the side or overlay navigation into a one page navigation as well by adding the class .one-page-nav to the side or overlay navigation wrapper.

Example
								
									
								
							

Template JS Parameters

All plugin calls and JS settings can be found in js/template-functions.js. Line 16-128 contains a range of variables that define selectors and parameters for plugin calls and template functions. They are organized in this manner so that you can quickly add/remove a selector or parameter on the fly. If you are familiar with JS this is pretty straight forward, but if this is your first time editng a JS file, we have made sure to outline key variables and their purpose below:


Page Scrolling

Page scrolling speed for fullscreen sections and one-page layouts can be set on line 44. Value should be entered as an integer from 0 and upwards.

Example
								
									var pageScrollSpeed = 500;
								
							

Masonry

By default masonry brick transition is turned off for when the window resizes or orientation changes. This is done for a speedier reorganization of bricks. Should you prefer using transition upon window resize or orientation change, you can set the speed and activate transition on line 53 and 54 respectively. Note that speed is entered as a string and can be written either as seconds ('0.Xs') or as milliseconds ('XXXms'). Masonry brick transition is activated by setting the variable 'msnryTransResize' to true.

Example
								
									var msnryTransDuration = '0.7s';
									var msnryTransResize = true;
								
							

Video
Responsive Video

This template relies on fluidvids.js to make videos responsive. You can make any video responsive by wrapping the iframe or object in a div with the class .video-container. This is done to prevent any conflict with plugins such as sliders that resize videos on their own. You can alter selectors that fluidvids should search for in the DOM on line 57.

Example
								
									var selectors = ['.video-container iframe', '.video-container object'];
								
							

You can also tell fluidvids which videos from what domain should be supported. This prevents fluidvids from parsing unwanted videos. This can be altered on line 58

Example
								
									var players = ['www.youtube.com', 'player.vimeo.com'];
								
							
MediaElement JS

For a more custom look, this template employs mediaelement.js for video and audio. As with fluidvids, we prevent conflict with by wrapping any video or audio in a div with the class .mejs-container. You can alter selectors that mediaelement.js should search for in the DOM on line 59.

Example
								
									var mejsPlayers = '.mejs-container audio, .mejs-container video';
								
							

Signup Form Parameters

All signup form messages can be found form line 107-115, for example:

Example
								
									var signupFormSending = 'Please wait.';
									var signupFormSendingButton = 'Sending...';
									var signupFormSuccess = 'You have been added to our list!';
									var signupFormError = 'Oh boy an error occurred, please try again.';
									var signupFormSubscribed = 'You are already subscribed to our list.';
									var signupFormFillFields = 'Please fill out required fields.';
									var signupFormValidEmail = 'Please enter a valid email address.';
								
							

Contact Form Parameters

All contact form messages can be found form line 119-126, for example:

Example
								
									var contactFormSending = 'Please wait.';
									var contactFormSendingButton = 'Sending...';
									var contactFormSuccess = 'Thank you, your email has been received!';
									var contactFormError = 'Oh boy an error occurred, please try again.';
									var contactFormFillFields = 'Please fill out required fields.';
									var contactFormValidEmail = 'Please enter a valid email address.';
								
							

Google Map Parameters Updated

Google Map settings can now be set as data attributes directly in the markup. Visit Google Map Sections for more information.

Example
								
									var pageFadeLocation = true;
								
							

Page Transition

Set whether page transition should be used when switching form one page to the next on line 144.

Example
								
									var pageFadeLocation = true
								
							
Classes

Page transition can be initated by any element in a page; either apply the generic class .fade-location to the element that should initiate the page transition and location change, or add your own specific selectors on line 146.

Example
								
									var launchLink = '.fade-location, .logo a, .navigation a, .side-navigation a, .overlay-navigation a, [class*="portfolio-"] .overlay-link, .pagination-previous, .pagination-next';
								
							

There may be situations where you want to exclude a certain button or link in a group from triggering the page transition and location change. For such situations, either apply the generic class .no-page-fade to the element that should be excluded or add your own specific selectors that should be excluded on line 147.

Example
								
									var excludeLink = '.no-page-fade, .mail-link, .lightbox-link, .contains-sub-menu, .blog .pagination-previous, .blog .pagination-next, .disabled';
								
							

Template PHP Prameters

There are only two PHP files that you need to modify for this template: subscribe.php and send-email.php.

Adding Your Email Address

Add your email address on line 3 of php/send-email.php.

Example
								
									$recipient="YOUR-EMAIL-HERE"
								
							
MailChimp API Key & List ID

Add your MailChimp API key on line 3 of php/subscribe.php.

Example
								
									$api_key="XXXXXXXxxXxxxXXXXXXxxXXXXXXXxXXx-xxX"
								
							

Add your MailChimp List ID on line 4 of php/subscribe.php.

Example
								
									$list_id="XXXXXXXxxx"
								
							

Plugins

For all plugin calls and parameters please visit the framework docs, found here.