The building blocks mapped a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field. (It is often called a style sheet, though that term has other meanings.) A style guide establishes and enforces style to improve communication for designing and development.
In this Template we used Bootstrap grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. You can easily create different layouts, while keeping this template fully compatible with every kind of device - from mobile to large screen desktop. If you need more information how built the system, visit Bootstrap website.
Sample Grid:
<!-- column 1 -->
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
<!-- column 2 -->
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
<!-- column 3 -->
<div class="col-xs-12 col-sm-6 col-md-4">
...
</div>
<!-- end column 3 -->
/* Extra small(xs) devices (phones, less than 768px) */
/* Small devices(sm) (tablets, 768px and up) */
/* Medium devices(md) (desktops, 992px and up) */
/* Large devices(lg) (large desktops, 1200px and up) */
Isotope is a jQuery plugin providing animated filtering and sorting. We used this jquery plugin in portfolio section.
Sample container:
<div class="masonryGrid">
<div class="category-1"> ... </div>
<div class="category-1"> ... </div>
<div class="category-2"> ... </div>
<div class="category-2"> ... </div>
</div>
Each button has its filter set in the data-filter attribute.
Sample Filter control:
<ul class="button-group">
<li data-filter="*">Show All</li>
<li data-filter=".category-1">First Category</li>
<li data-filter=".category-2">Second Category</li>
</ul>
Filtering happens when filter buttons are clicked.
For example: when you click on ".category-1" button, it shows the elements which have "category-1" classes and hides the other elements
<div class="masonryGrid">
<div class="category-1"> ... </div>
<div class="category-1"> ... </div>
</div>
countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element. We used this jquery plugin in facts section.
Sample counter:
<p data-from="0" data-to="127"></p>
In this example it will count up from 0 to 127.
To edit the contact form to send mails to your email box, you can look for the contact_form.php. You need to edit "your-email@youraddress.com" to your email.
contact_form.php:
$to = 'your-email@youraddress.com';
To change the map location, you can look at scripts.js. You need to edit "latitude" and "longitude" to yours.
Find the Latitude and Longitude of your address:
www.findlatitudeandlongitude.com
scripts.js:
var initLatitude = -37.812154;
var initLongitude = 144.954619;
There are 2 font-family used in this template
Font-Awesome icons
Check FontAwesome icons official website.
More informations about how to use icons are here.
Linea icons
Check Linea icons official website.
Font Reference is in the "assets/linea/icons-reference.html" file.
retina.js checks each image on the page to see if there is a high-resolution version of that image on the server. If a high-resolution variant exists, the script will swap in that image in-place.
For example, if your picture is located at "/images/my-picture.jpg" and the markup for this image looks like this:
<img src="/images/my-picture.jpg">
RetinaJS will automatically look for a corresponding image located at "/images/my-picture@2x.jpg". If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your picture's markup to look like this:
<img src="/images/my-picture@2x.jpg">