Introduction

Welcome!

Dear customers, first of all we would like to thank you for choosing Unify Template! We truly hope that Unify will serve you well, and that it will live up to your expectations.

We hope you will enjoy using Unify template's easy to navigate and user-friendly layout as well as developer-friendly code. Furthermore, a lot of resources have been employed and many options have been added just to make sure that our valued customers will be satisfied with their purchase.

Updates

In order to keep up with the fast paced evolution of web design trends, we always try to release new updates on continuous basis. Our goal with each update is to impress our customers and to put huge smile on their faces.

We would like to bring to your attention that once you purchase Unify Template, you become eligible for a lifetime entitlement to download updates for FREE! On the other hand, we regret to inform you that license upgrade is not available. If you wish to upgrade your license, a new purchase must be made.

Current updated release is v2.0 which offers several new plugins, plenty of new designs options, Bootstrap 4, fully SASS support and much more. All changes can be found in the changelog section here. Our updates do not stop there as many more new amazing features are surely coming soon in the next updates. Thank you always for using Unify Template and for being a vital part of its success.

Support

In Unify we believe that support is a crucial aspect of any successful product. Therefore, we try our very best to offer the most excellent support, and we always try everything within our power to assist our valued customers. It is worth to mention that our support mainly covers all design issues that one might encounter in addition to frontend-related issues as long as it is not complete customized work.

If you have any questions, please feel free to contact us at support@htmlstream.com and we will do our best to get back to you within 24 hours. Sometimes it might take a bit longer, but we will do our best not to keep you waiting longer than 48 hours. You may also leave us a message through our social pages: Facebook and Twitter

• - Author: Htmlstream
• - Product Page: Unify - Responsive Website Template
• - Created on: 24/04/2013
• - Latest Update on: 03/07/2017

File Structures

CSS (SASS) Structure

Components (Base and Blocks)

Components are divided into two parts in Unify: Base Components and Block Components. The prefix of u-* class is used for both (Base and Blocks) Components.

• Base Components are usually small helper components to build Block Components. Base Components could be buttons, badges, icon styles, tabs, accordions etc.
• Block Components are usually collection of Base Components with/without the Global Classes. It could be header, footer, news, product, team blocks etc.

Also, BEM naming convention is applied for the both Base/Block Components. You may find some quick information about BEM naming convention in the following article here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax

However, in some cases Base/Blocks Components do not hold BEM naming convention. The reason is, sometimes default Bootstrap components are extended in Unify by offering more UI solutions. In addition, in many cases Base and Block Components can be fully built with Global Classes.

Case #1 (Base Components)

Base Components are extended by using default Bootstrap’s components. For example, Bootstrap buttons are extended in Unify Template to offer more stunning solutions. This gives flexibility to use pure Bootstrap buttons within the Unify Template. Here is an example code how it looks:

Bootstrap Buttons:

• Code
• Design

												
													<a href="#" class="btn btn-primary">Primary</a>
													<a href="#" class="btn btn-outline-danger">Outline Danger</a>
													<a href="#" class="btn btn-sm btn-success">Success</a>
													<a href="#" class="btn btn-lg btn-warning">Warning</a>
												
											

Primary Outline Danger Success Warning

Unify Buttons

• Code
• Design

												
													<a href="#" class="btn btn-md u-btn-blue u-btn-3d">Blue 3d Button</a>
													<a href="#" class="btn btn-lg u-btn-purple u-btn-inset">Purple Inset</a>
													<a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v1-1">Primary Hover v1-1 Style</a>
													<a href="#" class="btn btn-md u-btn-darkgray u-btn-hover-v1-2">Black Hover v1-2 Style</a>
												
											

Blue 3d Button Purple Inset Primary Hover v1-1 Style Black Hover v1-2 Style

You may see from the above example codes, Unify buttons do not hold BEM naming convention. However, in some cases It can be used mixed BEM naming convention. Let’s look at the below example:

• Code
• Design

												
													<a href="#" class="btn btn-md u-btn-skew u-btn-primary">

														<span class="u-btn-skew__inner">Some texts…</span>

													</a>
												
											

Some texts…

The above example shows how button types could be used with the mixed BEM naming convention.

---

Case #2 (Base Components)

Base Components can be extended with the Global Classes. Here are some examples:

Bootstrap Blockquote:

• Code
• Design

												
													<blockquote class="blockquote">
													     <p class="mb-0">The best ideas come as jokes...</p>
													     <footer class="blockquote-footer">Author Name</footer>
													</blockquote>
												
											

The best ideas come as jokes...

Unify Blockquote:

• Code
• Design

												
													<blockquote class="blockquote g-brd-2 g-brd-primary--hover g-font-size-18 text-uppercase g-transition-0_2">
												     <p class="g-mb-5">The best ideas come as jokes...</p>
												     <footer class="blockquote-footer">Author Name</footer>
													</blockquote>
												
											

The best ideas come as jokes...

---

Case #3 (Block Components)

Block Components can be built within the Global Classes. Here are the examples where news block are constructed with some Global Classes and Base Components. Also, It uses default Bootstrap classes. Please note, the news block does not use any Block Components Classes like u-info-block-*

Article:

• Code
• Design

												
													<!-- Article -->
													<article class="u-shadow-v1-4">
													  <img class="img-fluid w-100" src="../HTML/assets/img-temp/500x450/img5.jpg" alt="Image Description">

													  <div class="g-pa-25">
													    <ul class="list-inline small g-color-gray-dark-v4 g-mb-20">
													      <li class="list-inline-item">
													        <a class="text-uppercase btn btn-xs u-btn-red rounded-0" href="#">Tech</a>
													      </li>
													      <li class="list-inline-item">|</li>
													      <li class="list-inline-item">July 02, 2017</li>
													    </ul>

													    <h3 class="h2 g-font-weight-300 g-mb-40">
													      <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">There are many great solutions in Unify for your business</a>
													    </h3>

													    <div class="media g-font-size-12">
													      <img class="d-flex mr-2 rounded-circle g-width-30 g-height-30" src="../HTML/assets/img-temp/100x100/img1.jpg" alt="Image Description">
													      <div class="media-body align-self-center text-uppercase">
													        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Htmlstream</a>
													      </div>

													      <div class="align-self-center">
													        <a class="u-link-v5 g-color-main g-color-primary--hover g-mr-10" href="#">
													          <i class="icon-bubbles align-middle g-mr-2"></i> 124
													        </a>
													        <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">
													          <i class="icon-eye align-middle g-mr-2"></i> 237
													        </a>
													      </div>
													    </div>
													  </div>
													</article>
													<!-- End Article -->
												
											

• Tech
• |
• July 02, 2017

There are many great solutions in Unify for your business

Htmlstream

124 237

									
										.u-tabs-v1 {..}
										.u-tabs-v1__item {..}
										.u-tabs-v1__link {..}
									
								

									
										<ul class="nav u-tabs-v1">
										  <li class="nav-item u-tabs-v1__item">
										    <a class="nav-link u-tabs-v1__link g-py-10 g-px-20 active">Home</a>
										  </li>
										  <li class="nav-item u-tabs-v1__item">
										    <a class="nav-link u-tabs-v1__link g-py-10 g-px-20">Messages</a>
										  </li>
										  <li class="nav-item u-tabs-v1__item">
										    <a class="nav-link u-tabs-v1__link g-py-10 g-px-20">Settings</a>
										  </li>
										</ul>
									
								

JavaScript Structure

								
									/**
									 * HSCore -
									 *
									 * @author HtmlStream
									 * @version 1.0
									 */

									;(function($) {

									  'use strict';

									  $.HSCore = {
									    init: function() {

									      $(document).ready(function(e) {
									        // here you can initialize all components core, which will be applied (called) in all pages,
									        // once the DOM will be ready to go.

									        // example
									        $('[data-toggle="tooltip"]').tooltip();
									      });

									      $(window).on('load', function(e) {
									        // here you can initialize all components core,
									        // which should be called as soon as the all (scripts, videos, images) are loaded.

													// example:
													this.components.parallax.init({
														...
													});
									      });

									    },

									    // Components
									    components: {},

									    // Helpers
									    helpers: {},

									    // Settings
									    settings: {
												animationEasing: ‘easeInQuad’, // example:
												animationDuration: 450, // example:
									      rtl: false
									      ...
									    }
									  };

									  $.HSCore.init(); // Initialization of HSCore object.

									})(jQuery);
								
							

									
										HSChartPie.init($(‘.js-pie’), {
											// Here you can include the object with its settings or you can just skip it.
										});
									
								

									$.HSCore.components.chartPie.init();
								

										
											/**
											 * Shortcode Component wrapper.
											 *
											 * @author Htmlstream
											 * @version 1.0
											 * @requires (also, it can be integrated with other plugins)
											 *
											 */
											;(function($){
												'use strict';

												$.Unify.components.ShortcodeComponent = {

													_baseConfig : {
														// ...
													},

													/**
													 * Initialization of ShortcodeComponent wrapper.
													 *
													 * @param jQuery collection (optional)
													 * @param Object config (optional)
													 *
													 * @return jQuery pageCollection - collection of initialized items.
													 */
													init: function(collection, config) {

														// ...

													},

													...

												}

											})(jQuery);
										
									

Shortcodes

All the source codes of shortcodes components can be directly accessed from the shortcodes demo pages. It can be easily copied by single click in the show code link.

However, this shortcodes section will be improved very soon by adding more detailed information for the each specific plugins (libraries) which are used in Unify Template. Meanwhile, if you have any questions please feel free to contact us at support@htmlstream.com and our support team will assist you.

Credits

All third party plugins (libraries) are located in HTML/assets/vendor/.. and image sources in HTML/assets/img-temp/..

Plugins (Libraries)

Premium Plugins

Images and Design Sources

Premium Image and Design Sources

Upgrade

The Next Generation of Unify Template

The next generation of Unify Template is finally arrived after a year development and we hope you will love it. Unify v2.0 has been fully re-written from scratch and loaded with tons of new modern possibilities, approaches and features. However, the upgrade from v1.9.x to v2.0 is almost impossible because of massive changes to the core of the code.

What is the reason behind for this massive changes in Unify 2?

Our team has began to develop this new methodology and structure, for v2.0, more than a year ago. During the last 4 years we have started receiving a huge number of requests from our customers about the implementation of Sass, Bootstrap 4, Flexbox, easy to use of JavaScript, HTML and CSS code structure. The decision was made through consultations with several high profile programmers, designers and users of Unify Template, to provide the best experience for everyone. One of the most wanted request was reusability of components though the packages.

In addition, the base of Unify v1.x is written more than four years ago with Bootstrap v2.x and since that time, approaches in front-end development is drastically changed. Creation of new demo options and delivery regular updates had significantly become difficult with the 1.9.x version. For that reason, the decision was made to introduce the most versatile and powerful template for Unify users. Moreover, when it comes to larger, more complex projects, well organized code is the key to efficiency.

The idea behind these changes, are to divide the user interface into independent blocks. This makes interface development easy and fast even with complex designs and it allows reuse of existing code without copying and pasting. In v2.0 Unify JavaScript elements are controlled from data attributes. Headers, Google Maps, Lightbox, Cubeportfolio, Slick carousel, Charts, Counters, HTML5 video backgrounds, Parallax effects and all other plug-ins are now invoked through data attributes. In particular, the colors, designs, classes and functions can all be controlled with the help of data attributes.

For example, let's take a look to the Google Maps shortcode component in v2.0 Unify:

							

								<!-- Google Maps -->
								<div id="GMapCustomized-light" class="js-g-map embed-responsive embed-responsive-21by9 g-height-300"
								   data-type="custom"
								   data-lat="40.674"
								   data-lng="-73.946"
								   data-zoom="12"
								   data-title="Agency"
								   data-styles='[["", "", [{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]], ["", "labels", [{"visibility":"on"}]], ["water", "", [{"color":"#bac6cb"}]] ]'
								   data-pin="true"
								   data-pin-icon="../../assets/img/icons/pin/green.png">
								</div>
							
						

As you can see from the above code, you do not have to dive into the JavaScript code anymore and write any codes. Now, you can just dynamically change it.

Changelog

Unify v2.0

Unify v2.0 has been fully re-written from scratch and changelog includes only the most important implementations, improvements and features. You may check the upgrade section why Unify has been re-written from scratch.

Overall, what's new in Unify v2.0? Unify v2.0 comes with the latest Bootstrap 4 version and now any component can be used within the any packages (demos, pages, sections etc.). In addition, Unify v2.0 comes with over 250 shortcode pages which is twice more than v1.9.x and all components in each shortcode pages are massively extended.

• New
  Bootstrap 4 (Unify v2.0 fully compatible with the latest version of Bootstrap 4)
• New
  Full SASS (SCSS) support (all components in separate files, It provides powerful control over CSS)
• New
  Ultimate control over the Headers (Unify v2.0 includes over 80 header options)

  • Positions (static, absolute top, absolute bottom, absolute. 2nd screen, sticky top, sticky bottom)
  • On Scroll Behaviors (show/hide header, change logo, change appearance, toggle header, hide top bar)
  • Navigation's mobile behavior (default - "top", push- "sidebar", overlay - "sidebar")
  • Navigation's mobile behavior (default - "top", push- "sidebar", overlay - "sidebar")
  • Submenu & Megamenu (onHover method, onClick method, inline submenu, megamenu column - "2, 3, etc.", megamenu horizontal/vertical tab etc.)
  • CSS Animated Hamburgers Icons (slider, squeeze, arrow etc.)

  For more detailed demos, please check out the shortcode header page - unify-main/shortcodes/headers/index.html
• New
  More than 30 new Promo Blocks
• New
  Over 500 new Shortcode Components

  • Alerts
  • Dividers
  • Icons
  • Badges
  • Accordions
  • Tabs
  • Badges
  • Paginations
  • Google Maps
  • List Groups
  • Product Blocks
  • Testimonial Blocks
  • Beautiful Galleries Options
  • Icon Blocks
  • News Blocks
  • Countdowns Blocks
  • Table Demos
  • News Blocks
  • Clients Blocks
  • Counters Blocks
  • User Blocks
  • and many others..
• New
  Popup Modals - unify-main/shortcodes/shortcode-base-modals.html
• New
  Smooth Parallax
• New
  Home Pages (all home pages are re-designed and extended with new design page)
• New
  Blog Pages (all block pages are re-designed and now comes with over 40 pages)
• New
  Search Pages (all search pages are re-designed and added other options)
• New
  Jobs Page (currently comes with two new design pages main and inner)
• New
  Profile Pages (all profile pages are re-designed and added with more options)
• New
  Contact Pages (all contact pages are re-designed and added other new pages)
• New
  Other New Pages (Unify v2.0 includes lots of other new page designs such as login, register, pricing, portfolios, faq etc.)

• Dropped
  Landing Pages Package (they will be added back to the One Pages package in our next updates but currently all the components can be used and included in v2.0 Unify.)
• Dropped
  Sky Forms Pro (all forms are completely rewritten from scratch)
• Dropped
  Layer Slider (since Unify already includes other premium sliders (Revolution and Master Slider), we have decided to drop it as included premium slider already includes same functionality)
• Dropped
  Other Plugins/Libraries (however, most of them are replaced with more efficient plugins/libraries. For example, Owl Carousel has been replaced with Slick Carousel.)

• Coming Soon
  RTL Version
• Coming Soon
  PSD Sources
• Coming Soon
  Classic One Page Demos
• Coming Soon
  Coming Soon Pages
• Coming Soon
  Error Pages
• Coming Soon
  Email Templates
• Coming Soon
  Other missed features which Unify v1.x included

End of Documentation

Once again, thank you for purchasing Unify Template!

If you have any questions, please feel free to contact us at support@htmlstream.com and we will do our best to get back to you within 24 hours. It might take a bit longer, but we try hard not to keep you waiting longer than 48 hours. You may also leave us a message through our social pages: Facebook and Twitter