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
- - Author: Htmlstream
- - Product Page: Unify - Responsive Website Template
- - Created on: 24/04/2013
- - Latest Update on: 09/02/2020
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.
Note!
Most of the PSD files are not included in the download package and should be downloaded separately through the provided dropbox link in the README.txt
file which is located in the following path: ../psd/README.txt
.
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.
Important!
Premium Revolution and Master Slider demos assets such as image and video files are not included in the download package and should be downloaded separately through the provided dropbox link. Please check out README.txt file inside the html/revolution-slider
and html/master-slider
folders for more detailed information inside.
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.) Newe-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)
Info!
Unify packages, such as "E-Commerce", "Blog & Template", "One Pages", "Multi Pages" and others do not include third party libraries inside its assets folder, they are globally linked to html/assets/vendor/..
folder. All third party libraries like Bootstrap jQuery, Font Awesome etc. share same directory.
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
- For responsive mode
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...
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...
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.
Info!
In addition, you may use Blank Page example page where header and footer are linked.
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:
- Install Node.js and Gulp.
- Install NPM modules
package.json
- 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
Important!
Note: If you are using MacOS please use sudo
keyword. And remember the $
in the code above just symbolizes the command prompt. That's not actually part of the command you run.
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):
MacOS:
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:
Theme Colors
There are two quick ways of changing theme color globally in all pages.
- By using SASS (SCSS) Higly Recommended
- 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:
- Open the file
_custom.variables.scss
fromhtml/assets/include/scss/custom/_custom.variables.scss
- 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
Info!
Please make sure to compile the SASS (SCSS) files after editing them. Please check out Gulp section for more information. If you come across with any problems with Unify v2.x during the development process, please feel free to contact our support from Htmlstream Contact Form and our team will assist you.
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)
Premium Plugins
Images and Design Sources
- Google Fonts: http://www.google.com/fonts
- Unsplash Beautiful, free photos: http://unsplash.com
- Photo by DAVID ILIFF. License: CC-BY-SA 3.0: http://bit.ly/ZhuJG1
Premium Image and Design Sources
- Peopleimages: Royalty Free Images and Stock Photos http://peopleimages.com/
- Deathtothestockphoto: Photos, videos & other fuel for your creative projects. http://deathtothestockphoto.com/
- Scene Creators: From flat layouts to stationery mock up https://creativemarket.com/Qeaql/785709-Scene-Creators-Bundle
Upgrade
Note!
Please do not forget to backup your files before the upgrade. If you come across with any problems with Unify v2.x during the upgrade and development processes, please feel free to contact our support from Htmlstream Contact Form and our team will assist you within a short time.
In addition, Please include all your custom SCSS(SASS) and JavaScript codes to custom.scss
and custom.js
files before the upgrading to the latest version. Otherwise, you may lose your custom styles during the upgrade. The files are located in html/assets/include/scss/custom/custom.css
and html/assets/js/custom.js
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="#!"
tohref="#"
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/..)
andjs
(../html/assets/js/..)
folder in the globalassets
folder. -
Made some changes into HS
go-to.js
plugins and dropped jQuery Ease. Please remove from HTML codejquery.easing.js
to make HSgo-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 tonavbar-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
topopper.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 tounify-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 outREADME.txt
file inside thehtml/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 therevolution-slider.zip
insidehtml/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 includesREADME.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 fromassets/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.
Info!
If you come across with any problems with Unify v2.x during the development process, please feel free to contact our support from Htmlstream Contact Form and our team will assist you.
Changelog
Note!
Please do not forget to backup your files before the upgrade. If you come across with any problems with Unify v2.x during the upgrade and development processes, please feel free to contact our support from Htmlstream Contact Form and our team will assist you within a short time.
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.
-
UpdatedBootstrap
v4.4.1
-
UpdatedjQuery
v3.4.1
-
UpdatedjQuery Migrate
v3.1.0
-
EnhancedQuantities
-
EnhancedGMap
-
EnhancedChart Pie
-
EnhancedCustombox
-
EnhancedVideo BG
-
EnhancedHeader
-
EnhancedFile Attachment
-
EnhancedDatepicker
-
FixedSCSS files
-
FixedHeader
-
FixedFancybox
-
FixedAccordion
-
FixedDatePicker
-
FixedHero Block
-
FixedAdvanced Selects
-
FixedGallery
-
FixedAdmin 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.
-
UpdatedBootstrap
v4.2.1
-
UpdatedClipboard.js
-
UpdatedBootstrap Select
-
UpdatedjQuery Migrate
-
Enhancedhs.range-slider.js
-
FixedPlyr on Music One Page
-
FixedEqual Height on Login Page 11 & Sign up Page 11
-
FixedDropdown of a top bar on E-commerce Pages
-
FixedCustom text inputs & textareas
-
Fixedand 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.
-
EnhancedRTL version for E-Commerce, OnePages & Multipages
-
EnhancedAdvanced Form Slider Controls (Admin Template)
-
UpdatedChosen
-
UpdatedClipboard
-
UpdatedGet-size
-
UpdatedImagesloaded
-
UpdatedjQuery
-
UpdatedMasonry
-
UpdatedPlyr
-
UpdatedPopper.js
-
UpdatedTooltip.js
-
UpdatedjQuery.Peity
-
FixedTopbar Header in iPad
-
FixedDropdown column in Top Navigation [IE]
-
FixedCubeportfolio "Load More"
-
FixedMegaMenu
-
Fixedand 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.
-
NewRTL version for E-Commerce, OnePages & Multipages
-
NewAdvanced Form Slider Controls (Admin Template)
-
NewSummernote WYSIWYG Editor (Admin Template)
-
NewSummernote WYSIWYG Editor (Admin Template)
-
NewDatatables Examples (Admin Template)
-
UpdatedBootstrap
4.1.3
-
UpdatedCube Portfolio
4.4
-
UpdatedRevolution Slider
5.4.8
-
EnhancedFixedOverall 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.
-
EnhancedShortcode Accordions
-
EnhancedShortcode Layout Forms
-
EnhancedGoogle Map on Lightbox
-
EnhancedCharts in Admin Dashboard for instant change viewport
-
EnhancedComlex Tables view in Admin Dashboard on the mobile resolution
-
FixedDatepicker date range
-
FixedActivity Sidebar for mobile devices in Admin Dashboard
-
UpdatedBootstrap
4.0.0
-
UpdatedCube Portfolio
4.3.1
-
UpdatedRevolution 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.
-
NewIntroducing brand new Package - Admin Template. This package includes over 50 pages.
-
NewAdmin 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
-
NewChartist JS - examples are using in Admin Dashboard Pages
-
NewVariety Widget Blocks (Comments, Calendar, Tickets, Activity etc.) - examples are used in Admin Dashboard Pages
-
NewSelect Forms
html/admin-template/forms/forms-elemets-selects.html
-
NewAdvanced Select Forms
html/admin-template/forms/forms-elemets-advanced-selects.html
-
NewText Inputs with Tags
html/admin-template/forms/forms-elemets-tags.html
-
NewDatepicker
html/admin-template/forms/forms-elemets-datepickers.html
-
NewQuantities Design
html/admin-template/forms/forms-elemets-quantities.html
-
NewValidations Designs
html/admin-template/forms/forms-validation-states.html
-
NewTable Designs
html/admin-template/tables/tables-basic.html
-
NewComplex Tables (Data Tables)
html/admin-template/tables/tables-complex.html
-
New12 Panel Variations
html/admin-template/panels/panel-variations.html
-
New8 Panel's Options
html/admin-template/panels/panel-options.html
-
NewColorful Notification
html/admin-template/notifications/notifications-colorful.html
-
NewLight Notification
html/admin-template/notifications/notifications-light.html
-
NewDark Notification
html/admin-template/notifications/notifications-dark.html
-
NewNotification's Builder
html/admin-template/notifications/notifications-builder.html
-
NewTimeline Design
html/admin-template/pages/pages-timeline.html
-
EnhancedSticky Block in less content
-
EnhancedSlick Carousel - added preloader
-
EnhancedMissing animate.css into show/copy code
-
FixedHeader - Megamenu 5 columns in IE browsers
-
FixedVertical center block in Login-7 page in IE browsers
Unify v2.4 5 December, 2017
-
NewIntroducing 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.
-
NewUniversity - 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
-
New7 new Promo Block (demo 38, 39, 40, 41, 42, 43 and 44)
html/unify-main/shortcodes/promo/..
-
NewClients (demo 13)
html/unify-main/shortcodes/shortcode-blocks-clients.html
-
NewTestimonials Advanced (demo 17, demo 19)
html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
-
New3 new Hero Contents (demo 17, 18, and 19)
html/unify-main/shortcodes/shortcode-blocks-hero-content.html
-
NewHeading (demo 28)
html/unify-main/shortcodes/shortcode-base-headings.html
-
New2 new Full Width Call To Action (CTA)
html/unify-main/shortcodes/shortcode-blocks-cta-full-width.html
-
New6 News Blocks (35, 36, 37, 38, 39 and 40 demos)
html/unify-main/shortcodes/shortcode-blocks-news.html
-
New3 Image Overlay News Blocks (21, 22, and 23 demos)
html/unify-main/shortcodes/shortcode-blocks-news-image.html
-
NewList News Block demo 8
html/unify-main/shortcodes/shortcode-blocks-news-no-images.html
-
New2 Interactive Icon Blocks (demo 22 and 23)
html/unify-main/shortcodes/shortcode-blocks-icons-interactive.html
-
New2 Icon Apps Blocks (demo 9 and 10)
html/unify-main/shortcodes/shortcode-blocks-icons-app.html
-
EnhancedClients (demo 13) moved to Testimonials Advanced as (demo 18)
html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
-
EnhancedFancybox Plugin
-
EnhancedAdded some additional functionality to HS
go-to
plugin. -
EnhancedYoutube Video Background (improved background video for heigh resolutions)
-
EnhancedDisable the scroll animation for mobile devices
-
FixedHeader - Mobile Sidebar Overlay (some issues are fixed on mobile resolution)
-
UpdatedjQuery v3.2.1
-
DroppedjQuery Easing (jquery.easing.js)
Unify v2.3 14 November, 2017
-
NewIntroducing 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.
-
NewReal 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
-
NewMarketing 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
-
NewMaterial Icons
html/unify-main/shortcodes/icons/shortcode-base-icon-material.html
-
NewClients (demo 13)
html/unify-main/shortcodes/shortcode-blocks-clients.html
-
NewTestimonials Advanced (demo 16)
html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
-
New4 new Hero Info Sections
html/unify-main/shortcodes/shortcode-blocks-hero-info.html
-
New4 new Hero Contents (demo 13, 14, 15 and 16)
html/unify-main/shortcodes/shortcode-blocks-hero-content.html
-
NewHeading (demo 27)
html/unify-main/shortcodes/shortcode-base-headings.html
-
New3 new Promo Block (demo 35, 36 and 37)
html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-35.html
-
New2 new Footers (demo 15 and 16)
html/unify-main/shortcodes/footers/shortcode-blocks-footer-classic.html
-
EnhancedSASS files
-
EnhancedImproved UX in shortcodes sidebar's panel, now it has a brand new look.
-
EnhancedMinor improvements in gMap (Google Map)
-
EnhancedSlick Carousel: added a new data attribute for responsive modes
-
EnhancedSome minor improvements in One Pages (Accounting, Agency, Architecture, Business, Charity, Consulting, Courses, Construction, Event, Gym, Lawyer, App, Music), E-Commerce and Blog & Magazine packages.
-
FixedDropdowns onload appearance in topbars
-
FixedCubeportfolio minor fixes
-
FixedTabs minor fixes
-
Fixedpackage.json file
-
FixedOnload scrolling
-
FixedThumbnail issue on Slick Carousel
-
FixedMisc pages (tether.js to popper.js)
-
UpdatedBootstrap - v4.0.0-beta-2
-
UpdatedAnimate CSS - v3.5.2
Unify v2.2 08 September, 2017
-
NewStyle 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.
-
NewNunjucks templating language (Beta)
-
New4 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
-
NewOver 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
-
NewPromo Block (demo 34)
html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-34.html
-
EnhancedDocumentation
-
EnhancedShortcodes sidebar's search panel - type and press enter to search components
-
EnhancedSASS file structure
-
EnhancedGoogle Maps - added multiple markers
-
EnhancedE-commerce - design of the header has been improved.
-
EnhancedBlog & Magazine - design of the header has been improved.
-
EnhancedShow/Copy Code in shortcodes pages
-
EnhancedPromo block of the Jobs Page - changed the form layout
page-jobs-1.html
-
EnhancedPromo block demo #1 - improved the form layout
shortcode-blocks-promo-demo-1.html
,home-page-8.html
-
FixedCustombox (modals) - newspaper and hashlink demos
-
UpdatedBootstrap - v4.0.0-beta
-
UpdatedCustombox - v4.0.3
Unify v2.1 03 August, 2017
-
NewBrand new Shortcodes Pages, now easily find any shortcodes with search bar and filtering navigation from side panel menu (sidebar).
unify-main/shortcodes/index.html
-
NewGulpJS - automate all your work (SASS compiling, concatenate, minify etc.)
-
NewGo 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.). -
NewConsulting One Page Demo
html/one-pages/consulting/index.html
-
NewCorporate One Page Demo
html/one-pages/corporate/index.html
-
NewMisc pages; Boxed Layout, Dark Theme, Blank Page etc
html/unify-main/misc/..
-
New90+ Revolution Slider demos
html/revolution-slider/index.html
Please check it outREADME.txt
file inside thehtml/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 therevolution-slider.zip
insidehtml/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). -
New100+ Master Slider demos
html/master-slider/index.html
The Master Slider demos also includesREADME.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. -
NewPromo Block (demo 32)
html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-32.html
-
NewPromo Block (demo 33)
html/unify-main/shortcodes/promo/shortcode-blocks-promo-demo-33.html
-
NewHero Content (demo 12)
html/unify-main/shortcodes/shortcode-blocks-hero-content.html
-
NewPricing Plans (demo 15)
html/unify-main/shortcodes/shortcode-blocks-pricing-plans.html
-
NewIcon Blocks Interactive (demo 18)
html/unify-main/shortcodes/shortcode-blocks-icons-interactive.html
-
NewStatic Process Blocks (demo 05)
html/unify-main/shortcodes/shortcode-blocks-hero-content.html
-
NewCounters (demo 32)
html/unify-main/shortcodes/shortcode-blocks-counters.html
-
NewClassic Footers (demo 14)
html/unify-main/shortcodes/footers/shortcode-blocks-footer-classic.html
-
NewFooter Contact Forms (demo 13)
html/unify-main/shortcodes/footers/shortcode-blocks-footer-contact-forms.html
-
NewTeam Blocks (demo 15)
html/unify-main/shortcodes/shortcode-blocks-team.html
-
NewTeam Advanced (demo 09)
html/unify-main/shortcodes/shortcode-blocks-team-advanced.html
-
NewTestimonials (demo 25)
html/unify-main/shortcodes/shortcode-blocks-testimonials.html
-
NewTestimonials Advanced (demo 14)
html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
-
NewTestimonials Advanced (demo 15)
html/unify-main/shortcodes/shortcode-blocks-testimonials-advanced.html
-
NewNews Blocks (demo 34)
html/unify-main/shortcodes/shortcode-blocks-news.html
-
NewClients (demo 12)
html/unify-main/shortcodes/shortcode-blocks-clients.html
-
EnhancedDocumentation - added started template section, detailed gulp instructions for converting SASS (SCSS) to CSS etc.
-
EnhancedSCSS stylesheet are refactored (it is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior)
-
EnhancedShow/Copy Code in shortcode pages and added show/copy code feature to missed components
-
EnhancedAll Headers pages (added active style)
-
EnhancedSlick Carousel (added
ondemand
option and various minor improvements) -
EnhancedAdded jquery-migrate.min.js to all Unify Pages
-
EnhancedAdded subnavigation to the Accounting One Page demo
dev/one-pages/accounting/example-with-submenu.html
-
EnhancedAdded custom.js file across all HTML pages
-
EnhancedSticky Block (added secondary navigation option)
-
FixedMega Menus tabs on Mobile resolutions
-
FixedVarious 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.
-
NewBootstrap 4 (Unify v2.0 fully compatible with the latest version of Bootstrap 4)
-
NewFull SASS (SCSS) support (all components in separate files, It provides powerful control over CSS)
-
NewUltimate 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.)
unify-main/shortcodes/headers/index.html
-
NewMore than 30 new Promo Blocks
-
NewOver 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..
-
NewPopup Modals -
unify-main/shortcodes/shortcode-base-modals.html
-
NewSmooth Parallax
-
NewHome Pages (all home pages are re-designed and extended with new design page)
-
NewBlog Pages (all block pages are re-designed and now comes with over 40 pages)
-
NewSearch Pages (all search pages are re-designed and added other options)
-
NewJobs Page (currently comes with two new design pages main and inner)
-
NewProfile Pages (all profile pages are re-designed and added with more options)
-
NewContact Pages (all contact pages are re-designed and added other new pages)
-
NewOther New Pages (Unify v2.0 includes lots of other new page designs such as login, register, pricing, portfolios, faq etc.)
-
DroppedLanding 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.)
-
DroppedSky Forms Pro (all forms are completely rewritten from scratch)
-
DroppedLayer 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)
-
DroppedOther Plugins/Libraries (however, most of them are replaced with more efficient plugins/libraries. For example, Owl Carousel has been replaced with Slick Carousel.)
-
Coming SoonRTL Version
-
Coming SoonPSD Sources
-
Coming SoonClassic One Page Demos
-
Coming SoonComing Soon Pages
-
Coming SoonError Pages
-
Coming SoonEmail Templates
-
Coming SoonOther missed features which Unify v1.x included
Info!
If you are looking the old changelog for Unify v1.x
, please click here to see the full changelog.
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