Overview
Unify is an incredibly beautiful and fully responsive Bootstrap 3 Template for any type of creative professionals. Template comes with developer friendly and easy to customizable code. It works on all main web browsers, tablets and phones.
We hope you will enjoy using Unify template’s easy to navigate and user-friendly layout and yet developer friendly code. Furthermore, a lot of resources have been employed and added many options just to make sure our valued customers will be satisfied with their purchase.
Current upgraded release is v1.5 and much more new amazing features are coming soon in the next updates. Thank you for using Unify Template.
Main Structures top
Home pages in Unify Template consist of header, slider, content part, footer and copyright parts. However, inner pages includes breadcrumbs instead of slider.
Beginning of the Page
In order to detect Internet Explorer browser version a specific class implemented to following code at the beginning of all HTML pages
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
Page Head Updated v1.4
Page head contains Title, Metadata, Favicon and CSS.
<head>
<title>Unify | Welcome...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/themes/default.css">
</head>
Wrapper New v1.4
.wrapper class is added on v1.4 to wrap ALL body contents. Mainly It consist of header, slider, breadcurmbs, content parts etc.
<div class="wrapper">
...
...
</div>
Note Below codes are part of the wrapper content. It starts from header and ends after copyright part.
Header Updated v1.4
<!--=== Header ===-->
<div class="header">
<-- Topbar -->
<div class="topbar">
...
...
</div>
<-- End Topbar -->
<-- Navbar -->
<div class="navbar navbar-default" role="navigation">
...
...
</div>
<-- End Navbar -->
</div>
<!--=== End Header ===-->
Content Updated v1.4
Container block includes all contents on pages. Moreover, in v1.4 added .content class to the main wrap container to give space (padding) for the content.
<!--=== Content Part ===-->
<div class="container content">
...
...
</div><!--/container-->
<!--=== End Content Part ===-->
Footer
<!--=== Footer ===-->
<div class="footer">
<div class="container">
...
...
</div><!--/container-->
</div><!--/footer-->
<!--=== End Footer ===-->
<!--=== Copyright ===-->
<div class="copyright">
<div class="container">
...
...
</div><!--/container-->
</div><!--/copyright-->
<!--=== End Copyright ===-->
Javascript and jQuery
Javascript files loaded in the end of page. This will reduce page load time.
<!-- JS Global Compulsory -->
<script src="assets/plugins/jquery-1.10.2.min.js"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/plugins/back-to-top.js"></script>
<!-- JS Page Level -->
<script src="assets/js/app.js"></script>
<script>
jQuery(document).ready(function() {
App.init();
});
</script>
<!--[if lt IE 9]>
<script src="assets/js/respond.js"></script>
<![endif]-->
Header & Navigation Updated v1.4top
Unify Template includes two header alternatives and fixed(static) header option.
- Default Header : All pages are use default header
- Header Alternative : You can see the demo example page in
page_home6.html
- Fixed (static) : Please note fixed header currently works only with default header. In order to make the default header to be fixed, you need to add
.header-fixed class to body tag. The demo page for fixed header is located in page_home10.html
Info This is default header view
Info This is alternative header view
Theme Configuration top
Unify Template includes 10 predefined theme colors. All theme CSS files are located in assets/css/themes/..
To change theme color you should just replace assets/css/themes/default.css to assets/css/themes/your_theme.css or you can use ready theme css files blue.css, red.css, orange.css etc. instead of your_theme.css
<head>
<title>Unify | Welcome...</title>
<!-- Meta -->
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/themes/default.css" />
</head>
Info If you want to use default theme style there's no necessity to link assets/css/themes/default.css you can just remove this line from HTML content. It's already included in main css files such as style.css, app.css etc.
Dark Layout Updated v1.5
You should follow two easy steps to make Dark Theme:
1. Link dark.css inside <head> section.
2. Add a .dark class to <body> tag.
For example:
<head>
<title>Unify | Welcome...</title>
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/themes/dark.css">
</head>
<body class="dark">
....
....
....
</body>
JavaScript initialization top
Core javascript initialization implemented in assets/js/app.js thorugh App object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.
var App = function () {
...
...
}();
Unify Template uses Open Sans font for headings from Google Web Fonts. You are able to choose more than 600+ fonts from Google Web Fonts. The font imported in the app.css file assets/css/app.css
/*Import Google Font*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
Credits top
| Name |
Description |
URL |
| Twitter Bootstrap |
Sleek, intuitive, and powerful front-end framework for faster and easier web development. |
http://twitter.github.io/bootstrap |
| jQuery |
jQuery is a fast, small, and feature-rich JavaScript library. |
http://jquery.com |
| Font Awesome |
Font Awesome The iconic font designed for Bootstrap |
http://fortawesome.github.io/Font-Awesome |
| Glyphicons Pro |
Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices. |
http://glyphicons.com |
| 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. |
http://www.themepunch.com/codecanyon/revolution |
| Parallax Slider |
A simple parallax content slider with different animations for each slider element and a background parallax effect. |
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery |
| Sequence Slider |
Sequence Slider is Responsive slider with Advanced CSS3 Transitions. Unify template uses "Sliding Horizontal Parallax" and "Apple Style" sliders. |
http://www.sequencejs.com |
| BxSlider |
The Responsive jQuery Content Slider. |
http://bxslider.com |
| FlexSlider |
FlexSlider an awesome, fully responsive jQuery slider toolkit. Unify uses FlexSlider for "Our Clients" carousel. |
http://www.woothemes.com/flexslider |
| Backstretch |
A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. |
http://srobbin.com/jquery-plugins/backstretch |
| FancyBox |
FancyBox is a tool for displaying images, html content and multi-media. |
http://fancybox.net |
| Quicksand |
Quicksand reorder and filter items with a nice shuffling animation. The folder name in Unify Template is portfolioSorting. |
https://github.com/razorjack/quicksand |
| Countdown |
jQuery Countdown Plugin |
http://keith-wood.name/countdown.html |
| 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 |
Image and Design credits
The following images are used for Unify Template:
Upgrade top
Info Please do not forget to backup your files before the upgrade. If you come across any problem during the upgrade please contact to our support at support@htmlstream.com
v1.4 Upgrade
Important! Now, we have created custom.css to overwrite all your codes, It's located in assets/css/custom.css. We suggest to write all your css customizations codes into custom.css file. The reason is, when you upgrade Unify to new versions in the future, you will not lose your custom styles.
- Totaly rewrited almost all
feature pages and changed their .html file names.
- Redesigned and improved
page_clients.html page.
- Changed:
page_meet_our_team.html to page_about_our_team.html
- Changed:
page_search.html to page_funny_boxes.html
- Rewrited class names for content boxes and funny boxes. More examples on pages:
feature_box_colored.html and feature_box_funny.html
- Created some new classes to round and circle elements/blocks. You can use these ready classes
.rounded, .rounded-x, .rounded-2x, .rounded-3x, .rounded-4x to round any blocks or elements. .rounded-x used to circle elements and It gives 50% border-radius to any element.
- Now
app.css is built as Unify framework's main stlye. It includes all featres of the Template such as Icons Styles, Buttons, Typography, Content Boxes etc.
- Redesigned almost all feature elements.
- Totaly changed
header structure. Rewrited both header and topbar blocks. Now topbar is a part of header block.
header css files are integrated to style.cssresponsive.css is integrated to each css files and It's deleted from css folder. Now, no more required to link responsive.css in html files.- Added
.twitter-time class into <span> for sidebar twitter blocks.
- Removed
dropdown-hover javascript plugin. Now, hover dropdowns work with just css codes.
- Removed
.btn-buy button from the home pages. Instead used default button.
- Removed icon from the navigation dropdown. Now, dropdown arrows were created from the css.
Please Note, latest featres on Unify starting v1.4 may not support with IE8. However, we will do our best to fix them as soon as possible.
Moreover, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.
| Feature |
Internet Explorer 8 |
Internet Explorer 9 |
border-radius |
Not supported |
Supported |
box-shadow |
Not supported |
Supported |
transform |
Not supported |
Supported, with -ms prefix |
transition |
Not supported |
placeholder |
Not supported |
v1.3 Upgrade
Since latest version of Unify upgraded to Twitter Bootstrap 3 all files comes with a huge JavaScript, HTML and CSS changes.
We suggest you to add the codes from previous version into v1.3 and use it as a base template.
*Please visit the offecial Bootstrap 3 documentation page for more detalied info http://getbootstrap.com
v1.2 Upgrade
Here is breifly explained what we changed in v1.2:
-
File structures:
-
Changed HTML file names. For example:
faq.html to page_faq.htmlabout.html to page_about.htmlcontact.html to page_contact.htmlicons.html to feature_icons.htmltable.html to feature_table- and others...
- We added all plugins to plugin folder and now all plugins located in
assets/plugins/..
- Parallax Slider now on autoplay. Modified file:
assets/plugins/parallax-slider/js/jquery.cslider.js
- Changed folder and file names from
menu to header in CSS folder assets/css/headers/header1.css and assets/css/headers/header2.css
- Changed Modernizr JS file name
assets/js/modernizr.custom.js
-
Changed top and header ID names to CLASS names and now they are
<div class="top">
and
<div class="header">
- Changed Social Icons class names which is in footer and in other pages.
- Deleted tag
<div id="body"> in all HTML files
- Added favicon icon
<link rel="shortcut icon" href="favicon.ico">
Info We will improve Unify Documentation in the future updates with more detailed structures. Meanwhile, If you come across any problem during the upgrade please contact to our support at support@htmlstream.com
End of Documentation top
Once again, thank you for purchasing Unify Template.
