Thank you for purchasing Boomerang. We are glad to announce you that the new version of Boomerang is the result of a great work wich came from a strong passion for making things simpler and more flexible. There are still plenty of great ideas that will be implemented very soon.
Boomerang 2 - MultiPurspose Template is a complete solution for businesses, corporates, creatives, real estate agencies, job portals, model agencies, news and magazines, schools and colleges, medical institutions. This template contains a variety of features that can be adapted for any situation. We have included, also, a shop template for those who want to start selling products in a nice and efficient way.
| # | Version | Date of release | Details |
|---|---|---|---|
| 1 | 1.0 | 06-10-2014 | Initial release |
Once purchased, unzip the compressed folder to see the directory structure of Boomerang. You'll see something like this:
boomerang/
├── assets/
│ ├── bootstrap/
│ ├── ...
├── css/
│ ├── global-style.css
├── font-awesome/
├── images/
├── js/
│ ├── jquery.js
│ ├── wp.app.js
│ ├── wp.swicther.js
│ └── ...
├── less/
│ ├── buttons.less
│ ├── global-style.less
│ ├── mobile-nav.less
│ ├── shortcodes.less
│ ├── theme.less
│ ├── variables
│ ├──├── variables.less
│ ├──├── ...
└── index.html
└── about.html
└── ...
assets - Contains all the plug-ins we used in this template
Since Boomerang is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.
Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
| Chrome | Firefox | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|
| Android | Supported | Supported | N/A | Not Supported | N/A |
| iOS | Supported | N/A | Not Supported | Supported | |
| Mac OS X | Supported | Supported | Supported | Supported | |
| Windows | Supported | Supported | Supported | Supported | Not Supported |
Internet Explorer 8 and 9 are also supported, however, 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 | |
To start working with Boomerang you can use a basic _template-basic-css.html or _template-basic-less.html (we recommend to use the less template version only for development purpose, so you can test less modification directly on your browser), or take the completely functional pages included in this package.
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.
CSS Version: Our style is represented by a single file named global-style.css which can be found in the CSS folder. It contains all the needed styles and it is identical with the less files, the single difference is that, for performance reasons, we have unified all the LESS files in the single CSS file.
LESS Version: You can find all the required files in the LESS folder. You will see that the customization is incredibly easy to do since all variables are located in a single file (variables.less) and all variable names are commented.
Use LESS if you want to modify Boomerang. We built it Bootstrap way so you won't find big difference. Use less/variables.less to modify different styles, use theme.less to remove needless components. For more info about compiling LESS files, click here
If you want to start from scratch, the best way is to use our template where all startup files are already included and ready to be used. You can find template.html file both for CSS and LESS version in the root folder.
Note that the basic template does not come with any additional plugin installed. It contains only the essential styles and script - Bootstrap, Font Awesome, Boomerang global style and UI Kit. To install a plugin or implement a feature go to the Components or Widgets section where you will find more details for this matter.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<title>Boomerang 2 - MultiPurpose Template</title>
<!-- Essential styles -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/fancybox/jquery.fancybox.css?v=2.1.5" media="screen">
<!-- Boomerang styles -->
<link id="wpStylesheet" type="text/css" href="css/global-style.css" rel="stylesheet" media="screen">
<!-- Favicon -->
<link href="images/favicon.png" rel="icon" type="image/png">
<!-- Required JS -->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<!-- Here comes the page content -->
<!-- Essential JS -->
<script src="js/modernizr.custom.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.metadata.js"></script>
<script src="js/jquery.hoverup.js"></script>
<script src="js/jquery.hoverdir.js"></script>
<script src="js/jquery.stellar.js"></script>
<!-- Forms -->
<script src="assets/ui-kit/js/jquery.powerful-placeholder.min.js"></script>
<!-- Assets -->
<script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script>
<script src="assets/hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/page-scroller/jquery.ui.totop.min.js"></script>
<script src="assets/mixitup/jquery.mixitup.js"></script>
<script src="assets/mixitup/jquery.mixitup.init.js"></script>
<script src="assets/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script src="assets/bootstrap/js/tooltip.js"></script>
<script src="assets/bootstrap/js/popover.js"></script>
<!-- Boomerang App JS -->
<script src="js/wp.app.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<title>Boomerang 2 - MultiPurpose Template</title>
<!-- Essential styles -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/fancybox/jquery.fancybox.css?v=2.1.5" media="screen">
<!-- Boomerang styles -->
<link type="text/less" href="less/global-style.less" rel="stylesheet/less" media="screen">
<!-- Favicon -->
<link href="images/favicon.png" rel="icon" type="image/png">
<!-- Required JS -->
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<!-- Here comes the page content -->
<!-- Essential JS -->
<script src="js/modernizr.custom.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.metadata.js"></script>
<script src="js/jquery.hoverup.js"></script>
<script src="js/jquery.hoverdir.js"></script>
<script src="js/jquery.stellar.js"></script>
<!-- Forms -->
<script src="assets/ui-kit/js/jquery.powerful-placeholder.min.js"></script>
<!-- Assets -->
<script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script>
<script src="assets/hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
<script src="assets/page-scroller/jquery.ui.totop.min.js"></script>
<script src="assets/mixitup/jquery.mixitup.js"></script>
<script src="assets/mixitup/jquery.mixitup.init.js"></script>
<script src="assets/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script src="assets/bootstrap/js/tooltip.js"></script>
<script src="assets/bootstrap/js/popover.js"></script>
<!-- Boomerang App JS -->
<script src="js/wp.app.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- LESS JS -->
<script type="text/javascript">
// LESS options
less = {
env: "development",
logLevel: 2
};
</script>
<script src="js/less.js"></script>
</body>
</html>
| Feature | Description |
|---|---|
| Mobile ready | Our template is ready to work on any device resolution. |
| 40+ Prebuild pages | With over 40 prebuild pages, now you have everything you need to start you website fresh and with no difficulties. |
| Over 300 icons | Font Awesome is the best option when it comes for scalables and vectorial icons. |
| Beautiful media gallery | Open photos, videos and other externat content in a nice and modern lightbox. |
| Fully Customizable Headers | Each page can have its own custom header with different height and background image or slider. |
| Interactive Elements | Counters, pie charts, horizontal progress bars, icon progress bars, elements with animation |
| Portfolio | Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns |
| Blog Masonry Layout | Make your blog page display in masonry layout |
| LayerSlider ($15 value) | Create a responsive (mobile friendly) or fullwidth slider with must-see-effects |
| Retina Ready | This theme includes high resolution icons |
| Multiple Sidebars | Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns |
| Slide Bar Menu | Boomerang comes with an amazing side menu widget area. |
| Modern, Professional Design | This theme is designed by a team of professional designers focused on user-experience and unique design style. |
| Fully Responsive | Boomerang is a fully responsive template and works perfectly on all screen sizes and mobile devices. |
| Extremely Customizable | Unlimited colors and sizes for all elements, 500+ Google fonts and a robust backend offers a solution for a variety of business or personal uses. |
| Flexible Layout | Use our demo layout or create your own visually different experience using our modular shortcodes |
| Modular Shortcodes | Get creative with unlimited combinations of easy-to-use shortcodes and quickly create any type of page you like. |
| Perfect Code | Coded in HTML5, CCS3 and jQuery, this skillfully constructed theme is 100% valid. |
| Modular Contact Page | You can set any combination between Google maps, Contact Form and regular content. |
NOTE: If you want to find out more about the included components, please click here
Boomerang is built with LESS. All variables used cand be found within the variables folder. You will find many files in there. They contain variables values for each color for the predefined styles (ex: blue, red, dark), but the structure is all the same.
We use LESS only for development. All the compiled styles can be found within the CSS folder. They are organized and each style contains its base color name.
All variables are in the variables folder from the LESS folder. All variables lines are commented so you can easily understand what are they for. You can easily modify colors, fonts, sizes, border radiuses, heading sizes, navbar elements and much more.
Next, we will explain the most important things you need to know before starting to customize your website.
There are 4 important colors that we used in this template for components, buttons and so on: base, alternative base, light and dark. Each color is represented by a class(base, base-alt, light, dark) which can be applied on many HTML components to change backgrounds (see the pricing page so you can see what we mean by that).
In the next table we will include all the background color variables:
| Variable name | Description | Class name |
|---|---|---|
| bgBase | The base color of the website (ex: blue) | .base |
| cBaseContrast | The color used on bgBase backgrounds | |
| bgAlt | The alternative base color (ex: green) | .base-alt |
| cAltContrast | The color used on bgAlt backgrounds | |
| bgLight | The light color (ex: gray) | .light |
| cLightContrast | The color used on bgLight backgrounds | |
| bgDark | The dark color (ex: black). | .dark |
| cDarkContrast | The color used on bgDark backgrounds | |
| bgLightGray | The lighter color used for alternating section backgrounds. | .light-gray |
| cLightGrayContrast | The color used on bgLightGray backgrounds | |
| layoutBg | The main layout background color applied on the whole body element | N/A |
| headerBg | Used for the main header when available. See header 3 example from the style builder. | N/A |
| footerBg | The main footer background color. | N/A |
| footerBg | The main footer background color. | N/A |
There are many more color variables included. We mentioned only the important ones. You can find them in the "Advanced customization" area from variables.less file.
Next, you will find all the necessary steps needed to create a new customized stylesheet. If you are not experienced with LESS, we suggest you follow our instructions so everything goes smoothly.
| File name | Description |
|---|---|
| global-style.less | Containes all the imports and responsive media queries. This unifies all the needed styles in a single file (global-style.css) |
| theme.less | This is the place where all the styles cand be found, except buttons and shortcodes |
| buttons.less | All the buttons classes cand be found within this file |
| shortcodes.less | We used this file to customize some of the Bootstrap components styles |
| variables.less | The place where all the variables can be found |
The important folders you will work with are less and css. LESS folder containes all the variables and styles, while CSS containes only the unified and compiled version of less files in css format.
In less -> variables you will find many files. You will only use variables.less. The other files are used for each pre-defined styles.
The variable file is formed from 2 sections: Easy customization (we have included all the important variables so you can easily change their values) and Advanced customization (we have included all the variables that we considered that won't be modified so often).
That's all. Now let's get to the customization part:
This was just a brief introduction about creating a custom style. You can find more about how to customize each component in the "Template Customization" section.
Boomerang 2 is loaded with great features and new plug-ins. All this can be found within the assets folder. They are nicely organized so you can easily find them whenever you want. Next, we will present all the plug-ins used in Boomerang 2:
| Plugin name | Description | |
|---|---|---|
| Animate | A cross-browser library of CSS animations. As easy to use as an easy thing. http://daneden.github.io/animate.css | |
| Bootstrap | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http://getbootstrap.com/ | |
| Easy Pie Chart | Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. http://rendro.github.io/easy-pie-chart/ | |
| Fancybox | Modern lightbox for media showing. http://www.fancybox.net | |
| Hover dropdown | Boostrap extension that makes navabar dropdown toggable on hover. It can be easily deactivated if not needed. | |
| Layer Slider | LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/ | |
| Masonry | It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. http://masonry.desandro.com/ | |
| Milestone counter | Milestone counter is for animating numbers in certain intervals. | |
| Mix it up | jQuery plugin for applying filters on elemnts, such portfolio projects. | |
| Page scroller | Easy and important scroll-to-top functionality | |
| Owl carousel | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. http://owlgraphic.com/owlcarousel/ | |
| Responsive mobile nav | Boomerang 2 comes with two mobile navs. The first one is the default Bootstrap collapse navbar. The second one is a customized mobile nav made especially for Boomerang 2 which is more intuitive and works much better on smaller devices. You can easily switch to one or another. | |
| Sky forms | Sky Forms Pro is a set of beautiful form elements with large amount of javascript features: validation, masking, modals, ajax submit, datepickers. It allows you to create forms of any complexity and for any needs: login, registration, contacts, review, order, comment, checkout, etc. http://voky.com.ua/showcase/sky-forms-pro/ | |
| Social buttons | Responsive social buttons with full funtionality. Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container. http://kurtnoble.com/labs/rrssb/ | |
| Timeline | We have included a reposnive timeline layout for those who want organizing events or news in a timescale format. | |
| Video JS | Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video. http://www.videojs.com/ |
Many of you won't need every single plug-in included in this template. That's why we worked on making this easier for you to select only the things you need and implement them easily into your project. We made a short list with what should you keep in order to have a fully function website including only the most importat assets.
That is the list with the essential assets you should keep no matter what. Anyway, we recommend not to remove anything definively. We haven't included all the assets in every page. Most of the assets are included only in the pages they are used. You can find more info about installing each asset on "Components" and "Widgets" sections.
Every asset has its initalization script in the wp.app.js file. We recommend not to remove anything, unless you are sure about what you do.
For keeping it clean, our suggestion is to do the same thing when you add some other plug-ins you need and add the initalization scripts in wp.app.js file.
Now it is time for us to tell you all the little secrets you need to know before starting customizing the template. We have included lots of freatures and possibilities for you so you can optimize any component as you want. You will see this by the time you will play with this template. We will start from the top and finish with the bottom.
Most of you won't need to modify the layout too much, but rather to replace only the base color with the one you need. First, take a look on the "CSS, LESS - Structure" chapter before staring here, if you didn't already.
@bgBase variable value with the color you want (HEX or RGB/RGBA)You can choose to make your website fluid or boxed. That's a really easy thing to do.
On the body tag, add the class .body-boxed
<div class="body-wrap body-boxed">
...
</div>
As you could see in the style builder, we have included 3 different headers + 1 header customized for cover pages with image background. Soon, there will be even more header structures, but for now we will show how to implement and customize these ones.
Each header contents can be found in the headers folder. Choose the one you want then copy-paste it in your website header section.
To change navbar background color, text color, fonts, sizes you will need to open variables.less again an change the variable from the table below. After you are done, follow the steps from "Customize/compile LESS files".
See the image with all the variables| Variable name | Description |
|---|---|
| navbarBg | The main navbar wrapper background |
| navbarElementBg | The navbar element background |
| navbarElementBgHover | The navbar element background on hover |
| navbarElementBorderColor | We used this file to customize some of the Bootstrap components styles |
| cNavbarElement | The navbar element text color |
| cNavbarElementHover | The navbar element text color on hover |
| navbarToggle | The color of the mobile nav collapse button |
| navbarDropdown | The navbar dropdown wrapper backgroun |
| navbarDropdownElementHover | The navbar dropdown element backgroun |
| navbarDropdownElementBorder | The border color between dropdown elements |
| cNavbarDropdown | The navbar dropdown text color |
| cNavbarDropdownHover | The navbar dropdown text color on hover |
You can easily drop a shadow below the navbar wrapper by adding navbar-shadow on the navbar-wp element.
<div class="navbar navbar-wp navbar-shadow">
...
</div>
You can easily apply an arrow when the dropdown is opened by putting navbar-arrow on the navbar-wp element.
<div class="navbar navbar-wp navbar-arrow">
...
</div>
See the image example
You can easily apply an arrow when the dropdown is opened by putting navbar-arrow on the navbar-wp element. We used Bootstrap's affix functionality so you can easily set any offset value and navbar configuration.
<div class="navbar navbar-wp navbar-fixed affix-top" data-spy="affix" data-offset-top="150" role="navigation">
...
</div>
Boomerang 2 comes with two mobile navigations: One is the Bootstrap's default and the second one is the one we wanted to implement in this version - Boomerang navbar. The reason ... we wanted an easier and more intuitive mobile navigation especially for touch devices.
You will find in the headers folder from the pakache root two versions for each header file: header-standard-1 and header-standard-1-alt. The structure is identical, but the mobile nav is different. In the files with "alt" termination is used the new Boomerang mobile nav, while in the other ones is the Bootstrap's default.
See the image with the mobile nav versions
For the Bootstrap's mobile nav you won't need to modify anything, but we want to show you the difference between the two nav versions so you can easily opt the the one that fits your project requirements.
Search for .navbar-toggle. This is the button element used to do all the action.
<!-- Mobile menu button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars icon-custom"></i>
</button>
Search for .navbar-toggle. This is the button element used to do all the action.
Remove the existing one and replace with the following:
<!-- Mobile menu button -->
<button type="button" class="navbar-toggle navbar-toggle-mobile-nav dl-trigger hidden-sm hidden-lg">
<i class="fa fa-bars icon-custom"></i>
</button>
Add the scripts below on the bottom of your page, as seen on any layout page from the package. This is responsible for the Boomerang's new mobile nav behavior.
<script src="assets/responsive-mobile-nav/js/jquery.dlmenu.js"></script> <script src="assets/responsive-mobile-nav/js/jquery.dlmenu..autofill.js"></script>
That's all you need to do
You have the option to include a top header above the page navbar (ex: header-standard-3). You can choose the for the white or the dark version. The colors can be modified in the variables.less from the variables folder.
See the white top header example image| Variable name | Description |
|---|---|
| topNavBgWhite | Variable used for the white/light top header background |
| cTopNavWhite | The white/light top header text color |
| cTopNavLinkWhite | The white/light top header link color |
| cTopNavLinkHoverWhite | The white/light top header link color on hover |
| topNavBgDark | Variable used for the dark top header background |
| cTopNavDark | The dark top header text color |
| cTopNavLinkDark | The dark top header link color |
| cTopNavLinkHoverDark | The dark top header link color on hover |
| topNavTextSize | Set the top header font size value |
| topNavTextWeight | Set the top header font weight value (400, 500, 600, 700) |
| topNavTextStyle | Set the top header text transform option (capitalize, uppercase, lowercase) |
* For compiling the LESS files, follow the same steps from "Customize/compile LESS files"
<div class="top-header">
...
</div>
For switching to the dark top header add .top-header-dark class as below:
<div class="top-header top-header-dark">
...
</div>