Structure

Files

category - (products category items)
css - (page stylesheets)
less - (stylesheets with CSS pre-processor)
fonts - (the Font Awesome iconic font)
images - (all images)
js - (page Scripts)
components - (page JavaScript Components)
lib - (page plugins)
script.js - (JavaScript file and module loader)
index.html - (main page document)
sendmail.php - (mail sender php script)

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.

Increase the semantic value of html section and content
Decrease the expectation of a specific html structure

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:

colors - (stylesheets for the each theme color)
welcome - (stylesheets for the theme intro page)
modules - (stylesheets for the each theme block)
_about-us.less - (about us section)
_menu.less - (page navigation)
_preloader.less - (page preloader)
...
_base.less - (global styles and resets for this theme)
_state.less - (media queries and elements state styles(hover, active...))
_layout.less - (classes and styles that define the theme layout)
_module.less - (stylesheet for the each theme component)
style.less - (all the less files)

JavaScript

Is very important how you structure your JavaScript because:

If done right, it makes code easier to understand for others and yourself when re-visting your own code.
Having a decided-upon structure helps keeping future code clean and encourages your declared best practices.
It makes your code testable.

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.

red
blue
green
l-red
purple
d-green

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.

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:



Nav item

In index.html file find text block below on line 37. Copy and paste a list item to add new nav.



Anchor href attribute must match an id of a block, where page will scroll to on click.

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:

Mail

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

Source & Credits

Fonts Source

Typography Fonts - Google Fonts
Icon Fonts - Font Awesome

Scripts Source

JavaScript library - jQuery
Front-end framework - Foundation
Slider - OWL Carousel
Lightbox - Fancybox
Modals - bPopup
File and module loader - RequireJS

General Info

Responsive

Fully Responsive

Browser Support

Chrome, Firefox, Opera, Safari, IE9+