Structure
Files
HTML
The template is based on the Foundation Framework
The Foundation grid system consist of 12 columns. Width of each column is specified in/by the small-#, medium-#, and large-# classes.
If you need more information about the Foundation grid system, please visit the official foundation documentation.
LESS
For style part of the template we are using Scalable and Modular Architecture for CSS/LESS and it has 2 core goals.
The purpose of SMACSS categorization is to reduse code repetition, to increse consistent experience, and to make the maintenance easier. Under SMACSS there are 5 general categories of css/less rules:
JavaScript
Is very important how you structure your JavaScript because:
For JavaScript design pattern we are using "Module Pattern", which helps keep the units of code both cleanly separated and well organized.
Each module object is a separate file and is loaded on the page with the help of RequireJS, JavaScript file and module loader.
Here is how a module looks like.
For more about JavaScript module pattern read the How Do You Structure JavaScript? The Module Pattern Edition article.
Customization & Styles
Theme color
To change the theme color, change the name of linked color file.

These are the colors and their file name.
Font Family
To change the embedded font, please take a look at the head part of the website and find this tag:
To change the font, first go to Google Fonts, choose a font and replace the code above with the generated code.
Next find _base.less file in css/less directory.
On line 4 replace current font family name('Fira Sans') with your new one.

Logo image
To change the logo image, rename your new image - logo.png, and replace it with current one in images directory.
For footer logo image, rename your new image - footer-logo.png, and replace it with current one in images directory.
Change preloader
To switch the theme preloader you need to paste inside '.preloader-container' block. Here is the code for:
triangle preloader:
color waves mask preloader:
Main slider
To add a new slider item copy/paste a list item and set image source.
Add category
To add a new category, create a new js file in the 'js/products/categories/' path. ex: bags.js
Here is the boilerplate code for a new category:
Define the new category in 'defineCategories.js' from the 'js/products/' path.
Countdown
In 'data-date' attribute set your custom date.
Change currency
To change the theme currency, write it inside the data-currency attribute on body tag.
Testimonial slider
To add a new testimonial in slider copy/paste list item in testimonial-slider section.
Video
To add your video on page, insert your files in video directory and change and set src to it.
In poster attribute set path to image that will be visible on devices that doesn't support video tag.
Partners
To add a partner find partners-carousel block and add a new list item with your partner logo image
Team members
To change existing information you need to open index.html, find in section with id "team-members" the "about-team" block.
Change the information you need:

Icons
To change an icon chose a new one from Font Awesome icons change icon class(fa-university).
To add a new social icon find following code block and add a new list item with your icon name and anchor link
To change icons in "WHY PEOPLE CHOOSE TRIABLO?" block chose an icon from Simple Line Icons Webfont Collection.
Change data-icon with your new one or a class.
Contacts
To include your contact information find block "Get in touch" in index.html and set your contacts instead ours:

To get messages from users you need to setup your email address in sendmail.php file.

Source & Credits
Fonts Source
Scripts Source
General Info
Responsive
Fully Responsive
Browser Support
Chrome, Firefox, Opera, Safari, IE9+