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.1 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


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 5 complete packages such as "Unify Main", "E-Commerce", "Blog & Template", "One 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 like "Multi Page", "Admin Templates" and so on 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.)
  • e-commerce (contains more than 6 ready to use shop pages.)
  • blog-magazine (the package includes home and article page and over 50 news block options from the Unify Main can be used inside the pacakge.)
  • one-pages (this pacakge includes variety thematic designs. One Pages package contains over 15 thematic designs.)
  • specialty-pages (404 error, maintenance, coming-sooon pages.)
  • email-templates (comes with four design options such as "password reset", "product alarm", "purchase complete" and "registration complete".)
  • revolution-slider (includes over 90 slider demos)
  • master-slider (includes over 100 slider demos)
  • index.html (Intro page)

HTML assets 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
    • Variables
  • Tools
    • Mixins
    • Functions
  • Core
    • Default styles for tags (body, a, etc.)
  • Vendors
    • Overwrite codes of the third party plugins
  • demo
    • For live demo purpose only (recommended to remove in the end product)
  • Base (u-class-*)
    • Base Components
  • Blocks (u-class-*)
    • Block Components
  • Themes
    • General theme styles
  • Custom
    • Custom codes for the end user (developer)
  • Globals (g-class-*)
    • Global Immutable Classes

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 class="mb-0">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 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...

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.

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.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/jquery.easing/js/jquery.easing.js"></script>
									  <script src="assets/vendor/tether.min.js"></script>
									  <script src="assets/vendor/bootstrap/bootstrap.min.js"></script>

									  <!-- JS Unify -->
									  <script src="assets/js/hs.core.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.

HTML5 Doctype

Unify along with Bootstrap require the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

								
								<!DOCTYPE html>
								<html lang="en">
									...
								</html>
								
							

Responsive Meta Tag

Unify is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

							
							<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
							
						

You can see an example of this in action in the starter 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 at support@htmlstream.com and our support team will assist you.


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.

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

								
									var gulp           = require('gulp'), // Gulp
									    sass           = require('gulp-sass'), // SASS,
									    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(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(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(sass({outputStyle:'expanded'}))
									    .pipe(autoprefixer(['last 3 versions', '> 1%'], { cascade: true }))
									    .pipe(gulp.dest('./html/blog-magazine/classic/assets/css/'))
									});

									// One Page
									gulp.task('sass-op', function() {
									  return gulp.src('./html/one-pages/accounting/assets/scss/**/*.scss')
									    .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(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']);
								
							

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. Create package.json and list dependencies (Gulp and plugins).
  3. Install NPM modules.
  4. Create gulpfile.js.
  5. Load plugin and create tasks.
  6. Run those tasks in the command line.

Gulp Installation

You need to have Node.js (Node) installed onto your computer before you can install Gulp.

If you do not have Node installed already, you can get it by downloading the package installer from Node's website.

When you're done with installing Node, you can install Gulp by using the following command in the command line:

								
									$ sudo npm install --global gulp
								
							

The npm install command we have used here is a command that uses Node Package Manager (npm) to install Gulp onto your computer.

The -g flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the gulp command anywhere on your system.

Mac users need the extra sudo keyword in the command because they need administrator rights to install Gulp globally.

Now that you have Gulp installed, let's make a Unify project that uses Gulp.

Creating a Gulp Project

First, create a folder called gulp to server as project root. Run the npm init command from inside that directory:

								
									$ npm init
								
							

The npm init command creates a package.json file for your project which stores information about the project, like the dependencies used in the project (Gulp is an example of a dependency).

npm init will prompt you:

								
									{
									  "name": "unify-2",
									  "version": "1.0.0",
									  "description": "Unify - Responsive Website Template",
									  "scripts": {
									    "test": "echo \"Error: no test specified\" && exit 1"
									  },
									  "author": "HS",
									  "license": "ISC",
									}

									Is this ok? (yes)
								
							

Once the package.json file is created, install Gulp into the project by using the following command:

								
									$ npm install gulp --save-dev
								
							

This time, we're installing Gulp into project instead of installing it globally, which is why there are some differences in the command.

You'll see that the sudo keyword isn't required because we're not installing Gulp globally, so -g is also not necessary. We've added --save-dev, which tells the computer to add gulp as a dev dependency in package.json.

								
									{
									  "name": "unify-2",
									  "version": "1.0.0",
									  "description": "Unify - Responsive Website Template",
									  "scripts": {
									    "test": "echo \"Error: no test specified\" && exit 1"
									  },
									  "author": "HS",
									  "license": "ISC",
									  "devDependencies": {
									    "gulp": "^3.9.1",
									  }
									}
								
							

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

Preprocessing with Gulp

All Gulp configuration goes in gulpfile.js in the root of your project. A pattern for writing tasks is that you first load a plugin you're about to use and then define a task which is based on that plugin.

First we load the plugins using Node.js and its require function:

								
									var gulp = require('gulp'), // Gulp
								
							

Sass

Compile Sass to CSS in Gulp with the help of a plugin called gulp-sass. You can install gulp-sass into your project by using the npm install command like we did for gulp.

Also use the --save-dev flag to ensure that gulp-sass gets added to devDependencies in package.json.

								
									$ npm install gulp-sass --save-dev
								
							

require gulp-sass from the node_modules folder just like we did with gulp before we can use the plugin.

								
									var gulp           = require('gulp'), // Gulp
									    sass           = require('gulp-sass'); // SASS,
								
							

We'll need to provide the sass task with source files and a destination for the task to work, so create a unify.scss file in the assets/scss folder. This file will be added to the sass task in gulp.src.

You need to output the eventual unify.css file to the "assets/css" folder, which would be the destination for gulp.dest.

								
									// Unify Main
									gulp.task('sass', function() {
									  return gulp.src('./html/assets/include/scss/**/*.scss')
									    .pipe(sass({outputStyle:'expanded'}))
									    .pipe(gulp.dest('./html/assets/css/'))
									});
								
							

Autoprefixer

Autoprefixer is a post-processing step meaning it actually updates already compiled stylesheets to add relevant prefixes based on an up-to-date database and a given configuration. In other words, you tell Autoprefixer which browsers you want to support, and it adds only relevant prefixes to the stylesheets.

To include Autoprefixer in Gulp workflow, you only need it to pipe it after Sass has done its thing. Then Autoprefixer updates the stylesheets to add prefixes.

First, install Autoprefixer

								
									$ npm install gulp-autoprefixer --save-dev
								
							

Then add it to the task:

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

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

Right now, we run the last 3 browser versions, with over 1% market share.

Watching for File Changes

Our next goal is to automatically do all the processing tasks when a change happens in the code. We accomplish this with watch method of the gulp object; it comes as a standard part of the Gulp so there is no need for loading new module.

watch method takes as arguments: source to be watched, and a task to be triggered after change. So we can define task like this:

								
									//
									// Watch
									//

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


									//
									// Default
									//

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

When you run the watch task it will listen for a change and it will keep running until stopped.

Run Gulp

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

							
								$ gulp
							
						

Now you can try making some change 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

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.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 demoshtml/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.2 ## August, 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.

Unify v2.1 03 August, 2017

  • New
    Brand new Shorcodes Pages, now easily find any shorcodes 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 demoshtml/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 shorcode 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 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


2017 © All Rights Reserved.

With love Unify team.