With love Unify team.


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.6.3 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 from Htmlstream Contact Form 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


File Structures

Download Package

The download package includes three folders html, documentation and psd folders. All the live demo examples are located inside the html folder. The html folder is a main source folder where all assets files are located.

HTML Folder

Unify comes with 6 complete packages such as "Unify Main", "E-Commerce", "Blog & Template", "One Pages", "Multi Pages" and "Specialty Pages" packages. In addition, Unify includes premium Revolution and Master Slider demos inside the package. Unify does not stop there as many more new amazing packages and demos are coming soon.

html Folder Structures

  • assets (all source files such as css, sass, js, images, plugins etc.)
  • unify-main (it is a main package which includes all shortcodes demos and all packages are based on Unify Main package.)
  • admin (contains more than 50 pages.) New
  • e-commerce (contains more than 40 ready to use shop pages.)
  • blog-magazine (the package includes variety home layouts and article page. In addition, over 50 news block options from the Unify Main can be used inside the package.)
  • one-pages (this package includes variety thematic designs. One Pages package contains over 15 thematic designs.)
  • multi-pages designed with terrific attention to details, flexibility and performance. Each demo comes with its inner pages.
  • specialty-pages (404 error, maintenance, coming-soon pages.)
  • revolution-slider (includes over 90 slider demos)
  • master-slider (includes over 100 slider demos)
  • index.html (Intro page)

assets Folder Structures

  • css (unify.css and custom.css)
  • js (custom.js, hs.core.js and all js init files including our custom js source files.)
  • include (scss, ajax and other source files.)
  • img (logos, patterns, custom icons and others)
  • img-temp (all content image files)
  • figures (svg files)
  • vendor (third party libraries like Bootstrap, jQuery etc.)
  • style-switcher (for live demo purpose only)

Folder like css, include, img, img-temp etc. are shared within the main package "Unify Main" only. On the other hand, the packages like One Pages, E-Commerce and Block & Magazine have their own assets folder for css and images.


CSS (SASS) Structure

CSS Architecture

Every STRONG project needs some file structure and organization. For that, already exist a lot of methodologies and solutions such as BEM, ITCSS, OOCSS, Atomic CSS and others. These methodologies help to maintain the project easily and scalably. For example, BEM is used by Google, BBC and many other large companies. Also, the authors of the mentioned methodologies are very experienced people in this field.

Each methodology has its own file structure, strict rules, recommendations and even coding structure. However, it is very hard to pick up only one of them and fully follow in our project - Unify 2. Here some reasons why It can not be used within the one methodology:

  • Unify-2 provides design solutions for all type of projects, not only for one end product. Any component must be reusable in any pages. For example, "news block" component in Real Estate theme could be easily reusable in Travel theme.
  • Transformation: one component changes to another one. For example, "team block" component in Travel Theme can be easily transformed to "product block" in E-Commerce page without duplicating CSS code and losing its semantic class name.
  • Built with Bootstrap Framework. In other words, Unify-2 is fully depended on Bootstrap classes which breaks the ideologies of some methodologies.

For that reason, we have picked best optimal practices and features from some popular methodologies and implemented into Unify-2. At the result, we came up with our own new file structure and methodology.

CSS (SASS) File Structure

Here is how Unify-2 CSS (SASS) file structure looks like:

  • Settings settings
    • Variables
  • Tools tools
    • Mixins
    • Functions
  • Core core
    • Default styles for tags (body, a, etc.)
  • Vendors vendors
    • Overwrite codes of the third party plugins
  • demo demo
    • For live demo purpose only (recommended to remove in the end product)
  • Base (u-class-*) base
    • Base Components
  • Blocks (u-class-*) blocks
    • Block Components
  • IE ie
  • JS js
  • Custom custom
    • Custom codes for the end user (developer)
  • Globals (g-class-*) globals
    • Global Immutable Classes
  • custom.scss
  • unify-components.scss
  • unify-core.scss
  • unify-globals.scss
  • unify.scss

Naming Classes (Globals and Components)

We use namespaces (prefixes) for the Blocks/Base Components and Core Globals classes. Both Globals and Components have their own rules.

The following table shows some examples of class names:

Global Core Base Components Block Components
g-mb-20 u-btn u-info-block-v1**
g-pa-30 u-tabs-v* u-info-block-v2**
u-badge u-info-block-v2-1
u-heading-v* u-info-block-v3
etc.

*Can be any number/value e.g. u-tabs-v3, u-accordion-v7 etc.

**Info block classes like u-info-block-v* can be team, product etc. block variations. Instead of team-block-v1, team-block-v2 classes, we use u-info-block-v2-1, u-info-block-v2-2 etc. This method gives us to use any blocks differently in other pages. For example, the team block can be easily changed to product block with some Global classes. This approach (info block classes) helps us to keep semantically correct block names in any situation.

Globals (Globals Immutable Classes)

Core Global Classes use g-* prefix. Here are some rules for the Global Immutable Classes:

  • Global classes are independent classes, they are not inherited from any other classes. Also, they can hold !important in CSS.
  • Globals are Immutable Classes which means they can not be changed or modified. For example:
    CSS - Wrong:
    											
    												.g-mb-50 {
    												  margin-bottom: 43px;
    												}
    											
    										
    CSS - Correct:
    											
    												.g-mb-50 {
    												 	margin-bottom: 50px !important;
    												}
    											
    										
  • They can not be overwritten as they are immutable classes. If you want to add or remove styles then you should edit via HTML. The following example code is not suitable for Global Immutable Classes:
    CSS - Wrong:
    											
    												.block-name .g-mb-20 {
    												 	z-index: 1;
    												}
    											
    										
    HTML:
    											
    												<div class="block-name">
    													<p class="g-mb-20">Some texts…</p>
    												</div>
    											
    										

    Instead, just use g-z-index-1 class in HTML code. Otherwise, when the value of margin bottom changes to other value, z-index will not be applied.

    HTML - Correct:
    											
    												<div class="block-name">
    													<p class="g-z-index-1 g-mb-20">Some texts…</p>
    												</div>
    											
    										

    However, If the case requires to use z-index within the block-name class then the new class should be added.

    HTML:
    											
    												<div class="block-name">
    													<p class="block-name__item g-mb-20">Some texts…</p>
    												</div>
    											
    										
    CSS:
    											
    												.block-name__item {
    													z-index: 1;
    												}
    											
    										
  • Global classes can accept modifiers. Modifiers are defined by double hyphens g-class-*--* and It can be used only in two conditions
    • For responsive mode g-class--sm, g-class--md etc.
    • For state classes like :hover, ::after, ::before etc. g-class-*--hover, g-class-*--focus

Overall, Global Classes can be used as a helper classes to extend any components by giving spacing (margins, paddings), text sizes, colors etc.. However, It is not limited with that, It is possible to build from scratch a new block component like product block, team block, news block etc. You may find some examples in Components (Base and Blocks) section.

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:
												
													<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>
												
											
Unify Buttons
												
													<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>
												
											

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:

												
													<a href="#" class="btn btn-md u-btn-skew u-btn-primary">
<span class="u-btn-skew__inner">Some texts…</span>
</a>

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:
												
													<blockquote class="blockquote">
														<p>The best ideas come as jokes...</p>
														<footer class="blockquote-footer">Author Name</footer>
													</blockquote>
												
											

The best ideas come as jokes...

Author Name
Unify Blockquote:
												
													<blockquote class="blockquote text-uppercase g-font-size-18">
													  <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...

Author Name

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:
												
													<!-- 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 -->
												
											

"Globals" VS "Components" Classes

Well, when and how to use u-* and g-* classes? Definitely there is no exact answer, it fully depends on the situation. You may use u-* classes to build a news block but in the same time you can do it with the g-* classes as shown previously.

However, if it is possible to build the block with the g-* classes then the block should be built within the g-* classes. For example, almost all news blocks are built with g-* classes. it helps to reduce overwriting the styles and duplicating the massive code.

Case #1

Almost, in all cases Base Components use u-* classes with the logical class names such as buttons, tabs, headings, paginations etc. Also, BEM naming convention uses where It needs. Please note, the below codes are just the samples.

CSS:
									
										.u-tabs-v1 {..}
										.u-tabs-v1__item {..}
										.u-tabs-v1__link {..}
									
								
HTML:
									
										<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>
									
								

Usually, Base Components include default styles in CSS but in most cases margins are used with g-* classes. Exceptions could be in ::before and ::after cases or in similar situations. However, as we have seen previously Base Components can be built within the g-* classes, the great example is blockquote component.


Case #2

In many cases Block Components use g-* classes to build the blocks. However, in some cases Block Components hold u-* classes when the block includes complex animations or solutions which is hard to do with g-* classes. Also, if Block Components start with u-* class it should be always start with u-info-* classes except in header Block Components. Only header Block Components can hold u-header-* classes.


JavaScript Structure

Core JavaScript

The foundation of the JavaScript structure in Unify is based on one main object which does not change the root when the new functionalities are added, but instead, it only expands without affecting the behavior of the core object. The name of the object is HSCore and the content of this object looks like this:

								
									/**
									 * 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);
								
							

Essentials of HSCore Object

HSCore Settings

$.HSCore.settings - here, all general settings are stored by default. For example, effects of jQuery animation, RTL version etc. and also you can store AJAX calls by default.

HSCore Helpers

$.HSCore.helpers - here, you can store helper functions in order to avoid repetition of codes or objects, which are often used by other core components (they are the part of a whole core). For example, a project needs to get the width of the browser's scrollbar and since it is different in all browsers you should write a tiny simple script. In this case, you may just place your script under the helpers.

In order to keep, the main file clear and easy to use, all helper components can be placed under the following path HTML/assets/js/helpers/..

HSCore Components

$.HSCore.components - this is the most voluminous (massive) component. Here you can include all the shortcodes and components of the template. The aim of this approach is to give developers as much flexibilities as possible by giving all major parameters of shortcode components via data-* attributes initializing.

As an example, let's take a look how a "ChartPies" plugin (library) is used within this JavaScript approach by creating decorator pattern (wrapper) around the plugin, where it automatically initialize the diagram on the basis of the data-* obtained. In the result, the initialization is pretty simple:

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

Such an object wrapper can be referred to the components and in a result the initialization looks like this:

									$.HSCore.components.chartPie.init();
								
Expanding (Extension) the Decorator Pattern (Wrapper)

Extension such an object can be in separate files, which even gives flexibility to keep the main file clear and it is highly recommended. All wrappers of shortcodes' components are located under the following path HTML/assets/js/components/..

Here is an example how decorator pattern (wrapper) looks like:

										
											/**
											 * 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);
										
									

Core (Main) Advantages

  • Avoiding the probabilities of conflicts between Unify codes and third party plugins (libraries).
  • Intuitive clear architecture.
  • Everything is structured, each component in its own file and in its component in the main object.
  • The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
  • By creating wrapper components, simply solves complicated initializations structures for the users.
  • Very easy access to any shortcodes components and core settings from anywhere in the template.

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 from Htmlstream Contact Form and our support team will assist you.


Starter Template

Start with this basic HTML starter template, or modify any included layout pages. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

								
								<!DOCTYPE html>
								<html lang="en">
									<head>
										<!-- Title -->
										<title>Unify - Responsive Website Template</title>

										<!-- Required Meta Tags Always Come First -->
										<meta charset="utf-8">
										<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
										<meta http-equiv="x-ua-compatible" content="ie=edge">

										<!-- Favicon -->
										<link rel="shortcut icon" href="favicon.ico">

										<!-- CSS Global Compulsory -->
										<link rel="stylesheet" href="assets/vendor/bootstrap/bootstrap.min.css">

										<!-- CSS Unify -->
										<link rel="stylesheet" href="assets/css/unify-core.css">
										<link rel="stylesheet" href="assets/css/unify-components.css">
										<link rel="stylesheet" href="assets/css/unify-globals.css">

										<!-- CSS Customization -->
										<link rel="stylesheet" href="assets/css/custom.css">
									</head>

									<body>
									  <main>
											<h1>Hello, World!</h1>
									  </main>

									  <!-- JS Global Compulsory -->
									  <script src="assets/vendor/jquery/jquery.min.js"></script>
									  <script src="assets/vendor/jquery-migrate/jquery-migrate.min.js"></script>
									  <script src="assets/vendor/popper.min.js"></script>
									  <script src="assets/vendor/bootstrap/bootstrap.min.js"></script>

									  <!-- JS Unify -->
									  <script src="assets/js/hs.core.js"></script>

									  <!-- JS Custom -->
									  <script src="assets/js/custom.js"></script>
									</body>
								</html>
							
						

That’s all you need for overall page requirements. Visit our demo examples to start laying out your site’s content and components.


Gulp

Gulp is a command line task runner utilizing Node.js platform. It runs custom defined repetitious tasks and manages process automation. It allows you to do a lot of stuff within your development workflow. You can compile sass files, minify and compress js files and much more.

What makes Gulp different from other task runners is that it uses Node streams, piping output from one task as an input to the next. It reads a file once, processes it through multiple tasks, and then writes the output file. This results in faster builds because there is no need to create and read intermediary files on hard drive.

Unify includes gulp.js and package.json files to quick start. The installing and using Gulp with the included files are quite easy.

Here is the example of how gulpfile.js in Unify looks like:

								
									var gulp           = require('gulp'), // Gulp
									    sass           = require('gulp-sass'), // SASS,
									    gulp-changed   = require('gulp-changed'), // Save time on processing unchanged files
									    autoprefixer   = require('gulp-autoprefixer'); // Add the desired vendor prefixes and remove unnecessary in SASS-files


									//
									// SASS
									//

									// Unify Main
									gulp.task('sass', function() {
									  return gulp.src('./html/assets/include/scss/**/*.scss')
									    .pipe(changed('./html/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/assets/css/'))
									});

									// E-commerce
									gulp.task('sass-shop', function() {
									  return gulp.src('./html/e-commerce/assets/scss/**/*.scss')
									    .pipe(changed('./html/e-commerce/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/e-commerce/assets/css/'))
									});

									// Blog & Magazine
									gulp.task('sass-blog', function() {
									  return gulp.src('./html/blog-magazine/classic/assets/scss/**/*.scss')
									    .pipe(changed('./html/blog-magazine/classic/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/blog-magazine/classic/assets/css/'))
									});

									// Multi Pages (Marketing Demo example, please change this path if you are using other demos)
									gulp.task('sass-mp-marketing', function() {
									  return gulp.src('./html/multipage/marketing/assets/scss/**/*.scss')
									    .pipe(changed('./html/multipage/marketing/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/multipage/marketing/assets/css/'))
									});

									// One Page (Accounting Demo example, please change this path if you are using other demos)
									gulp.task('sass-op', function() {
									  return gulp.src('./html/one-pages/accounting/assets/scss/**/*.scss')
									    .pipe(changed('./html/one-pages/accounting/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/one-pages/accounting/assets/css/'))
									});

									// Dark Theme
									gulp.task('sass-dt', function() {
									  return gulp.src('./html/examples/dark-theme/assets/scss/**/*.scss')
									    .pipe(changed('./html/examples/dark-theme/assets/css/'))
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/examples/dark-theme/assets/css/'))
									});


									//
									// Watch
									//

									gulp.task('watch', function() {
									  gulp.watch('./html/assets/include/scss/**/*.scss', ['sass']);
									});


									//
									// Default
									//

									gulp.task('default', ['watch', 'sass']);
								
							

Here is the example of how package.json in Unify looks like:

								
									{
									  "name": "unify",
									  "version": "2.0.0",
									  "description": "",
									  "main": "index.js",
									  "dependencies": {},
									  "devDependencies": {
									    "gulp": "^3.9.1",
									    "gulp-autoprefixer": "^3.1.1",
									    "gulp-changed": "^1.3.2",
									    "gulp-sass": "^3.1.0",
									  },
									  "scripts": {
									    "test": "echo \"Error: no test specified\" && exit 1"
									  },
									  "author": "htmlstream",
									  "license": "Under Wrapbootstrap LLC"
									}
								
							

Getting Started with Gulp.js

The goal of this tutorial is to introduce main concepts of Gulp that are used in Unify template and see it in action.

A brief overview of the steps to your first task:

  1. Install Node.js and Gulp.
  2. Install NPM modules package.json
  3. Run Gulp

1. Install Node.js and Gulp

Installing Node.js

If you do not have Node installed already, you can get it by downloading the package installer from Node's website. Please download the stable version of Node.js (LTS) NOT the latest.

Installing Gulp

You need to have Node.js (Node) installed onto your computer before you can install Gulp. When you're done with installing Node, you can install Gulp by using the following command in the command line:

Please note, first Gulp should be installed globally and for that reason --global command is used.

								
									$ npm install --global gulp
								
							

Now that you have Gulp installed, let's run Unify project and install that uses Gulp.

2. Install NPM modules package.json

Installing NPM modules

First, change the command line path into your project where Unify folder is located. if you have not done this before, you may check the following article to quick start http://www.digitalcitizen.life/command-prompt-how-use-basic-commands

Once the path of your workflow is changed to Unify folder, you may run package.json file by using the following command:

								
									$ npm install
								
							

This time, we're installing Gulp with its all dependency plugins like gulp-sass, gulp-autoprefixer etc. It might take a couple of minutes depends on your internet connection.

If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder. Below an example screenshots in Windows (PC) and MacOS:

Windows (PC):
Image Description
MacOS:
Image Description

Run Gulp

Now we have an integrated workflow. To try it out run:

								
									$ gulp
								
							

Now you can try making some changes to assets/include/scss/unify.scss and save it.

Sources:

  1. Getting Started with Gulp Js by Semaphoreci
  2. Gulp for Beginners by CSS Tricks
  3. Simple Gulpy Workflow Sass by Sitepoint

Theme Colors

There are two quick ways of changing theme color globally in all pages.

  1. By using SASS (SCSS) Higly Recommended
  2. Traditional (old) way; linking CSS file which includes predefined overwritten codes. Not Recommended

By using SASS (SCSS)

By using SASS (SCSS) which is recommended way as it does not duplicate the code, it just replaces whole used primary colors to your own. In addition, you may change anything from provided SASS files. For example, switch off unused components and switch on when they are needed. The possibilities are endless. Here is an example for changing the primary color:

  1. Open the file _custom.variables.scss from html/assets/include/scss/custom/_custom.variables.scss
  2. Add $g-color-primary: #72c02c; to the file.

For example:

								
									// Add here all your customized variables

									$g-color-primary: #72c02c;
								
							

Please note, #72c02c is the default color (green) of the Unify Template. You can change this color to any desired color of your choice.

For the list of available variables, please check out the file _variables.scss from the html/assets/include/scss/settings/_variables.scss

Traditional (old) way

Traditional (classic) way is using overwritten (re-written) predefined colors which we do not recommend doing this way as it duplicates the original code by overwriting to different (chosen) color. We are introducing Style Switcher (Beta) tool in Unify v2.2 where you are able to automatically generate your choice of color including layout styles and fonts. You may check the Style Switcher in our live demo pages.

The Style Switcher includes Get CSS button which opens a popup window when you click on it and you can copy the generated code and include to the custom.css file. In all HTML pages custom.css file already linked.


If you come across with any problems, difficulties or need more information, please feel free to reach us from Htmlstream Contact Form and our support team will assist you within a short time.


Credits

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

Plugins (Libraries)

Name Description URL
Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http://v4-alpha.getbootstrap.com
jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. http://jquery.com
Font Awesome Font Awesome The iconic font designed for Bootstrap http://fortawesome.github.io/Font-Awesome/
Simple Line Icons Simple Line Icons gives you 189 Icons that can instantly be customized — size, color and anything that can be done with the power of CSS. http://simplelineicons.com/
Slick Carousel Fully responsive. Scales with its container. Uses CSS3 when available. Swipe enabled. Or disabled, if you prefer etc. http://kenwheeler.github.io/slick/
Circles Lightweight JavaScript library that generates circular graphs in SVG. Now with animation. https://github.com/lugolabs/circles
The Final Countdown for jQuery A simple and html agnostic date countdown plugin for jQuery http://hilios.github.io/jQuery.countdown/
GMaps gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.io/gmaps
Masonry Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. http://masonry.desandro.com/
Vector Maps Many maps of the world, world regions, countries and cities are available for download from this site. All of them are made from the data in public domain or data licensed under the free licenses, so you can use them for any purpose free of charge. http://jvectormap.com/
Appear JS Track the visibility of dom elements and fire user defined callbacks as they appear and disappear http://creativelive.github.io/appear/
Animate.css CSS animation library https://daneden.github.io/animate.css/
Modernizr It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. https://modernizr.com/
Others The full list of table plugins and libraries which are used in Unify Template will be added very soon in our next updates. ...

Premium Plugins

Name Description URL
Revolution Slider Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS! http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
Master Slider Master Slider is a premium image and content slider with super smooth hardware accelerated transitions. It supports touch navigation with pure swipe gesture that you have never experienced before. It’s a truly responsive and device friendly slider which works perfect in all major devices. Master Slider is an awesome layer slider as well, with the ability of adding any html contents (texts, images, …) in layers. It is easy to use, plus there are 25+ ready to use templates available for you. You almost have everything in Master slider which is the most complete among the best, hotspots, thumbnails, variety of effects, Video support and much more. http://codecanyon.net/item/master-slider-jquery-touch-swipe-slider/6337671
Cube Portfolio Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content. http://codecanyon.net/item/cube-portfolio-responsive-jquery-grid-plugin/6372959
Parallaxer DZS Parallaxer is a script that turns any content into a cool parallax effect. It works smooth with any content you throw at it, images and even sliders, video players, basically any html content. It’s also the parallax that works flawless because of the algorithm behind. https://codecanyon.net/item/parallaxer-parallax-effects-on-content/9256004
FancyBox 3 FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize. http://fancyapps.com/fancybox

Images and Design Sources

Premium Image and Design Sources


Upgrade

Unify v2.6.3

Unify v2.6.3 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes. The update includes minor global changes due to the update of Bootstrap, jQuery.


Unify v2.6.2

Unify v2.6.2 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes. The update includes minor global changes due to the update of Bootstrap.

  • Replaced all href="#!" to href="#"

Unify v2.6.1

Unify v2.6.1 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes.


Unify v2.6.0

Unify v2.6.0 update is focused on new RTL package for One Pages, E-Commerce and Multi Pages demos (RTL package for Unify Main and Admin Template demos will be added later), new components for Admin Template package, vendors (libraries and frameworks) updates, improvements and some minor bug fixes.


Unify v2.5.1

Unify v2.5.1 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes. The major update includes Bootstrap 4 production version switching from Bootstrap 4 Beta version.


Unify v2.5

Unify v2.5 does not include any major changes. This update is focused on a new package "Unify Admin Template" and some minor bug fixes.


Unify v2.4

The major update includes switching from jQuery 2.x to jQuery v3.x Please make sure to update the vendor folder which is located in (../html/assets/vendor/..).

  • Lot's of changes made on Fancybox plugin. Please just replace the vendor (../html/assets/vendor/..) and js (../html/assets/js/..) folder in the global assets folder.
  • Made some changes into HS go-to.js plugins and dropped jQuery Ease. Please remove from HTML code jquery.easing.js to make HS go-to-* plugin compatible.

Unify v2.3

We suggest to check Bootstrap Beta 2 ship list page: https://github.com/twbs/bootstrap/issues/23278

  • Restored grid .offset- modifiers in Bootstrap 4 Beta 2 update.

Unify v2.2

We suggest to check Bootstrap Beta 1 ship list page: https://github.com/twbs/bootstrap/issues/21568

  • In all navigation menu navbar-toggleable-md changed to navbar-expand-lg during Bootstrap beta upgrade. In addition, g-top-3 class is added to toggler button in headers.
  • Some minor changes in forms
  • Dropped all responsive utilities classes, now display utilities classes should be used
  • Renamed flexbox order utilities classes
  • Replaced tether.js to popper.js
  • Added _custom.mixins.scss and _custom.variables.scss, now all custom variables can be included into _custom.variables.scss file.
  • unify.scss is split to unify-components.scss, unify-core.scss, unify-globals.scss and now in all HTML pages split CSS files are linked. However, unify.scss still can be used as one large file.

Please check out changelog section for other changes.


Unify v2.1

  • Revolution Slider demos html/revolution-slider/index.html Please check it out README.txt file inside the html/revolution-slider/.. folder. The file includes a separate download link with protected password for Revolution Slider demos. The total size of the slider demos is huge (around 320 MB) and for that reason it is included as a separate download link. If you would like to use the slider demos, you should just need to unzip the revolution-slider.zip inside html/revolution-slider/.. after downloading it and all demos will work same as live demo pages. There is no need for any other manual work, only needs to be downloaded and unzipped inside the correct path (place).
  • Master Slider demos html/master-slider/index.html The Master Slider demos also includes README.txt file as Revolution Slider folder which includes a download link with protected password for Master Slider. Please just follow the above (Revolution Slider) instructions.
  • Removed Simple Line Icons CSS link is removed from the specialty-pages/coming-soon/page-coming-soon-1.html (No Simple Line Icons used in this page)
  • Removed unify.css link across all One Page demo options. (This reason being is that each One Page option includes its own CSS file with prefixed name)
  • Removed tooltips js init codes $(‘[data-toggle=“tooltip”]‘).tooltip(); across all HTML pages and placed into hs.core.js
  • Removed unused/duplicated JavaScripts init codes from HTML pages
  • Removed @import "OLD/tabs-v1" to @import "OLD/tabs-v12" are removed from assets/include/scss/base/tabs/_tabs.scss (since, they are old and unused stylesheets anymore)
  • theme/custom.scss file is moved from scss folder to less folder.
  • Dzsparallaxer .load() jquery events are replace by .on('load', callback())

Please check out changelog section for other changes.


Unify v2.0

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.x 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.x 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.x 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.6.3 12 February, 2020

Unify v2.6.3 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes.

  • Updated
    Bootstrap v4.4.1
  • Updated
    jQuery v3.4.1
  • Updated
    jQuery Migrate v3.1.0
  • Enhanced
    Quantities
  • Enhanced
    GMap
  • Enhanced
    Chart Pie
  • Enhanced
    Custombox
  • Enhanced
    Video BG
  • Enhanced
    Header
  • Enhanced
    File Attachment
  • Enhanced
    Datepicker
  • Fixed
    SCSS files
  • Fixed
    Header
  • Fixed
    Fancybox
  • Fixed
    Accordion
  • Fixed
    DatePicker
  • Fixed
    Hero Block
  • Fixed
    Advanced Selects
  • Fixed
    Gallery
  • Fixed
    Admin Sidebar

Unify v2.6.2 06 January, 2019

Unify v2.6.2 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes.

  • Updated
    Bootstrap v4.2.1
  • Updated
    Clipboard.js
  • Updated
    Bootstrap Select
  • Updated
    jQuery Migrate
  • Enhanced
    hs.range-slider.js
  • Fixed
    Plyr on Music One Page
  • Fixed
    Equal Height on Login Page 11 & Sign up Page 11
  • Fixed
    Dropdown of a top bar on E-commerce Pages
  • Fixed
    Custom text inputs & textareas
  • Fixed
    and other minor bug fixes.

Unify v2.6.1 12 December, 2018

Unify v2.6.1 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes.

  • Enhanced
    RTL version for E-Commerce, OnePages & Multipages
  • Enhanced
    Advanced Form Slider Controls (Admin Template)
  • Updated
    Chosen
  • Updated
    Clipboard
  • Updated
    Get-size
  • Updated
    Imagesloaded
  • Updated
    jQuery
  • Updated
    Masonry
  • Updated
    Plyr
  • Updated
    Popper.js
  • Updated
    Tooltip.js
  • Updated
    jQuery.Peity
  • Fixed
    Topbar Header in iPad
  • Fixed
    Dropdown column in Top Navigation [IE]
  • Fixed
    Cubeportfolio "Load More"
  • Fixed
    MegaMenu
  • Fixed
    and other minor bug fixes

Unify v2.6.0 15 August, 2018

Unify v2.6.0 update is focused on new RTL package for One Pages, E-Commerce and Multi Pages demos (RTL package for Unify Main and Admin Template demos will be added later), new components for Admin Template package, vendors (libraries and frameworks) updates, improvements and some minor bug fixes.

  • New
    RTL version for E-Commerce, OnePages & Multipages
  • New
    Advanced Form Slider Controls (Admin Template)
  • New
    Summernote WYSIWYG Editor (Admin Template)
  • New
    Summernote WYSIWYG Editor (Admin Template)
  • New
    Datatables Examples (Admin Template)

  • Updated
    Bootstrap 4.1.3
  • Updated
    Cube Portfolio 4.4
  • Updated
    Revolution Slider 5.4.8

  • Enhanced
    Fixed
    Overall minor fixes and improvements

Unify v2.5.1 24 February, 2018

Unify v2.5.1 update is focused on vendors (libraries and frameworks) updates, improvements and some minor bug fixes. The major update includes Bootstrap 4 production version switching from Bootstrap 4 Beta version.

  • Enhanced
    Shortcode Accordions
  • Enhanced
    Shortcode Layout Forms
  • Enhanced
    Google Map on Lightbox
  • Enhanced
    Charts in Admin Dashboard for instant change viewport
  • Enhanced
    Comlex Tables view in Admin Dashboard on the mobile resolution

  • Fixed
    Datepicker date range
  • Fixed
    Activity Sidebar for mobile devices in Admin Dashboard

  • Updated
    Bootstrap 4.0.0
  • Updated
    Cube Portfolio 4.3.1
  • Updated
    Revolution Slider 5.4.6.4

Unify v2.5 07 February, 2018

Unify v2.5 does not include any major changes. This update is focused on a new package "Unify Admin Template" and some minor bug fixes.

  • New
    Introducing brand new Package - Admin Template. This package includes over 50 pages.
  • New
    Admin Template html/admin-template/..
    • dashboard-v1.html
    • dashboard-v2.html
    • dashboard-v3.html
    • dashboard-v4.html
    • header-static.html
    • sidebar-hide.html (on click to humberger menu)
    • layout-light.html
    • layout-dark-body-v2.html
    • layout-light-body-v2.html
    • app-profile.html
    • app-profile-biography.html
    • app-profile-interests.html
    • app-profile-mobile.html
    • app-profile-photos-and-videos.html
    • app-profile-payment-methods.html
    • app-profile-transactions.html
    • app-profile-security.html
    • app-profile-upgrade-plan.html
    • app-profile-invite.html
    • app-profile-connected-accounts.html
    • app-projects.html
    • app-chat.html
    • app-file-manager.html
    • app-contacts.html
    • forms-elemets-text-inputs.html
    • forms-elemets-textareas.html
    • forms-elemets-selects.html
    • forms-elemets-advanced-selects.html
    • forms-elemets-checkboxes-radios.html
    • forms-elemets-toggles.html
    • forms-elemets-file-inputs.html
    • forms-elemets-sliders.html
    • forms-elemets-tags.html
    • forms-elemets-ratings.html
    • forms-elemets-datepickers.html
    • forms-elemets-quantities.html
    • forms-validation-states.html
    • tables-basic.html
    • tables-complex.html
    • panel-variations.html
    • panel-options.html
    • notifications-colorful.html
    • notifications-light.html
    • notifications-dark.html
    • notifications-builder.html
    • metrics.html
    • ui-icons.html
    • pages-timeline.html
    • packages.html
  • New
    Chartist JS - examples are using in Admin Dashboard Pages
  • New
    Variety Widget Blocks (Comments, Calendar, Tickets, Activity etc.) - examples are used in Admin Dashboard Pages
  • New
    Select Forms html/admin-template/forms/forms-elemets-selects.html
  • New
    Advanced Select Forms html/admin-template/forms/forms-elemets-advanced-selects.html
  • New
    Text Inputs with Tags html/admin-template/forms/forms-elemets-tags.html
  • New
    Datepicker html/admin-template/forms/forms-elemets-datepickers.html
  • New
    Quantities Design html/admin-template/forms/forms-elemets-quantities.html
  • New
    Validations Designs html/admin-template/forms/forms-validation-states.html
  • New
    Table Designs html/admin-template/tables/tables-basic.html
  • New
    Complex Tables (Data Tables) html/admin-template/tables/tables-complex.html
  • New
    12 Panel Variations html/admin-template/panels/panel-variations.html
  • New
    8 Panel's Options html/admin-template/panels/panel-options.html
  • New
    Colorful Notification html/admin-template/notifications/notifications-colorful.html
  • New
    Light Notification html/admin-template/notifications/notifications-light.html
  • New
    Dark Notification html/admin-template/notifications/notifications-dark.html
  • New
    Notification's Builder html/admin-template/notifications/notifications-builder.html
  • New
    Timeline Design html/admin-template/pages/pages-timeline.html

  • Enhanced
    Sticky Block in less content
  • Enhanced
    Slick Carousel - added preloader
  • Enhanced
    Missing animate.css into show/copy code

  • Fixed
    Header - Megamenu 5 columns in IE browsers
  • Fixed
    Vertical center block in Login-7 page in IE browsers

Unify v2.4 5 December, 2017

  • New
    Introducing brand new Multi Page Package in Unify Template and now Unify includes 6 complete packages. This package includes beautiful demos with its inner pages. Currently, it comes with two new demos.
  • New
    University - Education Multi Page Demo html/multipage/education/..
    • home-page-1.html
    • page-programs-1.html
    • page-apply-1.html
    • page-future-students-1.html
    • page-current-students-1.html
    • page-faculty-and-staff-1.html
    • page-events-1.html
    • page-alumni-1.html
    • page-campus-life-1.html
    • page-research-1.html
    • page-help-1.html
    • page-contacts-1.html
    • page-signin-1.html
  • New
    7 new Promo Block (demo 38, 39, 40, 41, 42, 43 and 44) html/unify-main/shortcodes/promo/..
  • New
    Clients (demo 13) html/unify-main/shortcodes/shortcode-blocks-clients.html
  • New
    Testimonials Advanced (demo 17, demo 19) html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
  • New
    3 new Hero Contents (demo 17, 18, and 19) html/unify-main/shortcodes/shortcode-blocks-hero-content.html
  • New
    Heading (demo 28) html/unify-main/shortcodes/shortcode-base-headings.html
  • New
    2 new Full Width Call To Action (CTA) html/unify-main/shortcodes/shortcode-blocks-cta-full-width.html
  • New
    6 News Blocks (35, 36, 37, 38, 39 and 40 demos) html/unify-main/shortcodes/shortcode-blocks-news.html
  • New
    3 Image Overlay News Blocks (21, 22, and 23 demos) html/unify-main/shortcodes/shortcode-blocks-news-image.html
  • New
    List News Block demo 8 html/unify-main/shortcodes/shortcode-blocks-news-no-images.html
  • New
    2 Interactive Icon Blocks (demo 22 and 23) html/unify-main/shortcodes/shortcode-blocks-icons-interactive.html
  • New
    2 Icon Apps Blocks (demo 9 and 10) html/unify-main/shortcodes/shortcode-blocks-icons-app.html

  • Enhanced
    Clients (demo 13) moved to Testimonials Advanced as (demo 18) html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
  • Enhanced
    Fancybox Plugin
  • Enhanced
    Added some additional functionality to HS go-to plugin.
  • Enhanced
    Youtube Video Background (improved background video for heigh resolutions)
  • Enhanced
    Disable the scroll animation for mobile devices

  • Fixed
    Header - Mobile Sidebar Overlay (some issues are fixed on mobile resolution)

  • Updated
    jQuery v3.2.1

  • Dropped
    jQuery Easing (jquery.easing.js)

Unify v2.3 14 November, 2017

  • New
    Introducing brand new Multi Page Package in Unify Template and now Unify includes 6 complete packages. This package includes beautiful demos with its inner pages. Currently, it comes with two new demos.
  • New
    Real Estate Multi Page Demo html/multipage/real-estate/..
    • home-page-1.html
    • page-list-view-1.html
    • page-grid-view-1.html
    • page-single-item-1.html
    • page-agents-list-view-1.html
    • page-agents-grid-view-1.html
    • page-agents-single-page-1.html
    • page-share-1.html
    • page-help-1.html
    • page-contacts-1.html
    • page-login-1.html
    • page-register-1.html
    • page-forgot-password-1.html
  • New
    Marketing Multi Page Demo html/multipage/marketing/..
    • home-page-1.html
    • page-about-1.html
    • page-services-1.html
    • page-consultants-1.html
    • page-works-1.html
    • page-hire-us-1.html
    • page-careers-1.html
    • page-help-1.html
    • page-pricing-1.html
    • page-contacts-1.html
  • New
    Material Icons html/unify-main/shortcodes/icons/shortcode-base-icon-material.html
  • New
    Clients (demo 13) html/unify-main/shortcodes/shortcode-blocks-clients.html
  • New
    Testimonials Advanced (demo 16) html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
  • New
    4 new Hero Info Sections html/unify-main/shortcodes/shortcode-blocks-hero-info.html
  • New
    4 new Hero Contents (demo 13, 14, 15 and 16) html/unify-main/shortcodes/shortcode-blocks-hero-content.html
  • New
    Heading (demo 27) html/unify-main/shortcodes/shortcode-base-headings.html
  • New
    3 new Promo Block (demo 35, 36 and 37) html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-35.html
  • New
    2 new Footers (demo 15 and 16) html/unify-main/shortcodes/footers/shortcode-blocks-footer-classic.html

  • Enhanced
    SASS files
  • Enhanced
    Improved UX in shortcodes sidebar's panel, now it has a brand new look.
  • Enhanced
    Minor improvements in gMap (Google Map)
  • Enhanced
    Slick Carousel: added a new data attribute for responsive modes
  • Enhanced
    Some minor improvements in One Pages (Accounting, Agency, Architecture, Business, Charity, Consulting, Courses, Construction, Event, Gym, Lawyer, App, Music), E-Commerce and Blog & Magazine packages.

  • Fixed
    Dropdowns onload appearance in topbars
  • Fixed
    Cubeportfolio minor fixes
  • Fixed
    Tabs minor fixes
  • Fixed
    package.json file
  • Fixed
    Onload scrolling
  • Fixed
    Thumbnail issue on Slick Carousel
  • Fixed
    Misc pages (tether.js to popper.js)

  • Updated
    Bootstrap - v4.0.0-beta-2
  • Updated
    Animate CSS - v3.5.2

Unify v2.2 08 September, 2017

  • New
    Style Switcher (Beta) - choose unlimited colors, change layout styles (wide, boxed, semi-boxed), select predefined Google Fonts and outer spaces then instantly download your custom styles right from the Style Switcher.
  • New
    Nunjucks templating language (Beta)
  • New
    4 Blog & Magazine Home Pages html/blog-magazine/classic/..
    • bm-classic-home-page-2.html
    • bm-classic-home-page-3.html
    • bm-classic-home-page-4.html
    • bm-classic-home-page-5.html
  • New
    Over 35 Shop Pages html/e-commerce/..
    • home-page-2.html
    • home-page-3.html
    • page-addresses-1.html
    • page-cancelled-orders-1.html
    • page-category-left-sidebar-1.html
    • page-category-no-sidebar-1.html
    • page-category-no-sidebar-2.html
    • page-category-no-sidebar-3.html
    • page-category-no-sidebar-4.html
    • page-category-right-sidebar-1.html
    • page-checkout-1.html
    • page-coming-soon-1.html
    • page-contact-1.html
    • page-empty-cart-1.html
    • page-grid-filter-left-sidebar-1.html
    • page-grid-filter-no-sidebar-1.html
    • page-grid-filter-no-sidebar-2.html
    • page-grid-filter-no-sidebar-3.html
    • page-grid-filter-no-sidebar-4.html
    • page-grid-filter-right-sidebar-1.html
    • page-help-1.html
    • page-list-filter-left-sidebar-1.html
    • page-list-filter-no-sidebar-1.html
    • page-list-filter-no-sidebar-2.html
    • page-list-filter-no-sidebar-3.html
    • page-list-filter-no-sidebar-4.html
    • page-list-filter-right-sidebar-1.html
    • page-login-1.html
    • page-login-security-1.html
    • page-notifications-1.html
    • page-open-orders-1.html
    • page-order-completed-1.html
    • page-orders-1.html
    • page-our-stores-1.html
    • page-password-recovery-1.html
    • page-payment-options-1.html
    • page-signup-1.html
    • page-single-product-1.html
    • page-single-product-2.html
    • page-single-product-3.html
    • page-wallet-1.html
    • page-wishlist-1.html
  • New
    Promo Block (demo 34) html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-34.html

  • Enhanced
    Documentation
  • Enhanced
    Shortcodes sidebar's search panel - type and press enter to search components
  • Enhanced
    SASS file structure
  • Enhanced
    Google Maps - added multiple markers
  • Enhanced
    E-commerce - design of the header has been improved.
  • Enhanced
    Blog & Magazine - design of the header has been improved.
  • Enhanced
    Show/Copy Code in shortcodes pages
  • Enhanced
    Promo block of the Jobs Page - changed the form layout page-jobs-1.html
  • Enhanced
    Promo block demo #1 - improved the form layout shortcode-blocks-promo-demo-1.html, home-page-8.html

  • Fixed
    Custombox (modals) - newspaper and hashlink demos

  • Updated
    Bootstrap - v4.0.0-beta
  • Updated
    Custombox - v4.0.3

Unify v2.1 03 August, 2017

  • New
    Brand new Shortcodes Pages, now easily find any shortcodes with search bar and filtering navigation from side panel menu (sidebar). unify-main/shortcodes/index.html
  • New
    GulpJS - automate all your work (SASS compiling, concatenate, minify etc.)
  • New
    Go to Top (Back to Top) in-house plugin developed by Htmlstream Team, comes various design options are added across all Unify pages. There are 3 styles which can be controlled via class name u-go-to-v* (*can be any number e.g. u-go-to-v1, u-go-to-v2, u-go-to-v3 etc.).
  • New
    Consulting One Page Demo html/one-pages/consulting/index.html
  • New
    Corporate One Page Demo html/one-pages/corporate/index.html
  • New
    Misc pages; Boxed Layout, Dark Theme, Blank Page etc html/unify-main/misc/..
  • New
    90+ Revolution Slider demos html/revolution-slider/index.html Please check it out README.txt file inside the html/revolution-slider/.. folder. The file includes a separate download link with protected password for Revolution Slider demos. The total size of the slider demos is huge (around 320 MB) and for that reason it is included as a separate download link. If you would like to use the slider demos, you should just need to unzip the revolution-slider.zip inside html/revolution-slider/.. after downloading it and all demos will work same as live demo pages. There is no need for any other manual work, only needs to be downloaded and unzipped inside the correct path (place).
  • New
    100+ Master Slider demos html/master-slider/index.html The Master Slider demos also includes README.txt file as Revolution Slider folder which includes a download link with protected password for Master Slider. Please just follow the above (Revolution Slider) instructions.
  • New
    Promo Block (demo 32)html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-32.html
  • New
    Promo Block (demo 33)html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-33.html
  • New
    Hero Content (demo 12)html/unify-main/shortcodes/shortcode-blocks-hero-content.html
  • New
    Pricing Plans (demo 15)html/unify-main/shortcodes/shortcode-blocks-pricing-plans.html
  • New
    Icon Blocks Interactive (demo 18)html/unify-main/shortcodes/shortcode-blocks-icons-interactive.html
  • New
    Static Process Blocks (demo 05)html/unify-main/shortcodes/shortcode-blocks-hero-content.html
  • New
    Counters (demo 32)html/unify-main/shortcodes/shortcode-blocks-counters.html
  • New
    Classic Footers (demo 14)html/unify-main/shortcodes/footers/shortcode-blocks-footer-classic.html
  • New
    Footer Contact Forms (demo 13)html/unify-main/shortcodes/footers/shortcode-blocks-footer-contact-forms.html
  • New
    Team Blocks (demo 15)html/unify-main/shortcodes/shortcode-blocks-team.html
  • New
    Team Advanced (demo 09)html/unify-main/shortcodes/shortcode-blocks-team-advanced.html
  • New
    Testimonials (demo 25)html/unify-main/shortcodes/shortcode-blocks-testimonials.html
  • New
    Testimonials Advanced (demo 14)html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
  • New
    Testimonials Advanced (demo 15)html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
  • New
    News Blocks (demo 34)html/unify-main/shortcodes/shortcode-blocks-news.html
  • New
    Clients (demo 12)html/unify-main/shortcodes/shortcode-blocks-clients.html

  • Enhanced
    Documentation - added started template section, detailed gulp instructions for converting SASS (SCSS) to CSS etc.
  • Enhanced
    SCSS stylesheet are refactored (it is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior)
  • Enhanced
    Show/Copy Code in shortcode pages and added show/copy code feature to missed components
  • Enhanced
    All Headers pages (added active style)
  • Enhanced
    Slick Carousel (added ondemand option and various minor improvements)
  • Enhanced
    Added jquery-migrate.min.js to all Unify Pages
  • Enhanced
    Added subnavigation to the Accounting One Page demo dev/one-pages/accounting/example-with-submenu.html
  • Enhanced
    Added custom.js file across all HTML pages
  • Enhanced
    Sticky Block (added secondary navigation option)

  • Fixed
    Mega Menus tabs on Mobile resolutions
  • Fixed
    Various IE11 fixes including headers, slick carousel, parallax etc.

Please check out the Upgrade section for other minor fixes/changes.


Unify v2.0 05 July, 2017

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 from Htmlstream Contact Form 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


2020 © All Rights Reserved.

With love Unify team.