Boomerang - Mutipurpose Template by Webpixels

1. Overview

What's in the box

What's great about Boomerang is that you have everything you need in one place, no matter you need a multi-page or one page website. The files are very well organized and very easy to work with. After the unzipping process you will have the next file and folder structure:

The structure is very simple and easy to understand. All styles, images, javascript and other third-party plugins are stored within the assetsfolder, while the page templates are stored within the html folder. You can also find an index and documentation pages in the root folder. These are good places to start from if you're new to Boomerang

boomerang-root/
├── assets/
│   ├──├── css/
│   ├──├── js/
│   ├──├── scss/
│   ├──├── vendor/
│   ├──├── ...
├── html/
│   ├──├── blog/
│   ├──├── e-commerce/
│   ├──├── homepages/
│   ├──├── pages/
│   ├── ...
├── newsletter/
├── documentation.html/
└── index.html

Boomerang comes with both CSS and SASS folders. It is up to you which method will choose to customize your website. Learn more in the CSS and SASS sections.

1. Overview

Getting started

If you are now all set up, you can opt using the pre-defined page layouts (e.g: index.html, about-agency.html) or create your own by using one of the starter templates which contain the page's main structure.

All you have to do is to fill it up with the desired elements and content.

Basic template

We prepared for you a set of pages that contain only the essential components - header, slidebar (optional), footer and other elements - so you can esily start creating new pages instantly.

1. Basic version

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css" type="text/css">

<!-- Global style (main) -->
<link type="text/css" href="assets/css/global-style.css" rel="stylesheet" media="screen">

<!-- Custom style - Remove if not necessary -->
<link type="text/css" href="assets/css/custom-style.css" rel="stylesheet">

</head>
<body>
    <div class="body-wrap">
        <div id="st-container" class="st-container">

            <nav class="st-menu st-effect-1" id="menu-1">
                <!-- Slidebar content -->
            </nav>

            <div class="st-pusher">
                <div class="st-content">
                    <div class="st-content-inner">
                        <!-- Main content -->
                    </div>
                </div>
            </div><!-- END: st-pusher -->
        </div><!-- END: st-container -->
    </div><!-- END: body-wrap -->

    <!-- Back to top -->
    <a href="#" class="back-to-top btn-back-to-top"></a>

    <!-- Core -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/tether/js/tether.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/vendor/jquery.easing.js"></script>
    <script src="assets/js/slidebar/slidebar.js"></script>
    <script src="assets/js/classie.js"></script>

    <!-- Bootstrap Extensions -->
    <script src="assets/vendor/bootstrap-dropdown-hover/js/bootstrap-dropdown-hover.js"></script>
    <script src="assets/vendor/bootstrap-notify/bootstrap-growl.min.js"></script>
    <script src="assets/vendor/scrollpos-styler/scrollpos-styler.js"></script>

    <!-- App JS -->
    <script src="assets/js/wpx.app.js"></script>

</body>
</html>

2. Slidebar version

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css" type="text/css">

<!-- Global style (main) -->
<link type="text/css" href="assets/css/global-style.css" rel="stylesheet" media="screen">

<!-- Custom style - Remove if not necessary -->
<link type="text/css" href="assets/css/custom-style.css" rel="stylesheet">

</head>
<body>
    <div class="body-wrap">
        <div id="st-container" class="st-container">

            <nav class="st-menu st-effect-1" id="menu-1">
                <!-- Slidebar content -->
            </nav>

            <div class="st-pusher">
                <div class="st-content">
                    <div class="st-content-inner">
                        <!-- Main content -->
                    </div>
                </div>
            </div><!-- END: st-pusher -->
        </div><!-- END: st-container -->
    </div><!-- END: body-wrap -->

    <!-- Back to top -->
    <a href="#" class="back-to-top btn-back-to-top"></a>

    <!-- Core -->
    <script src="assets/vendor/jquery/jquery.min.js"></script>
    <script src="assets/vendor/tether/js/tether.min.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/vendor/jquery.easing.js"></script>
    <script src="assets/js/slidebar/slidebar.js"></script>
    <script src="assets/js/classie.js"></script>

    <!-- Bootstrap Extensions -->
    <script src="assets/vendor/bootstrap-dropdown-hover/js/bootstrap-dropdown-hover.js"></script>
    <script src="assets/vendor/bootstrap-notify/bootstrap-growl.min.js"></script>
    <script src="assets/vendor/scrollpos-styler/scrollpos-styler.js"></script>

    <!-- App JS -->
    <script src="assets/js/wpx.app.js"></script>

</body>
</html>

2. Theme customization

Choosing the CSS style

Boomerang comes with multiple skin colors. Each one of them has a seperate stylesheet. You can find them within the CSS folder under the name of global-style-color, where color is the name of the color your want to use. Replace the current style with the desired one in the head section.


                                                <link href="assets/css/global-style-green.css" type="text/css" rel="stylesheet" media="screen">

If you simply want to use the default stylesheet, you don't need to use any other files.


                                                <link href="assets/css/global-style.css" type="text/css" rel="stylesheet" media="screen">

Creating custom styles

If you need to create/edit some styles we recommend you to use the custom-style.css from the css folder. This way you will be able to get all the future updates without having to make any modifications.

Boxed or fluid

On the .body-wrap tag, add the class .body-boxed

<div class="body-wrap body-boxed">
    ...
</div>

If you want a boxed layout with no margins, add the .body-boxed--no-margin class next to the .body-boxed class

<div class="body-wrap body-boxed body-boxed--no-margin">
    ...
</div>

Headers and navigations

You can find all the header examples in the "Features" menu under the name of "Headers".

Placement

Just add fixed-top or fixed-bottom to make the navbar always visible on top or on bottom.

<nav class="navbar navbar-toggleable-md fixed-top">
    ...
</div>

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

<nav class="navbar navbar-toggleable-md bg-default">
    ...
</div>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-dark">
    ...
</div>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-base-1">
    ...
</div>

Navbar options

Class name	Description
navbar-inverse	Invert the navbar's background by using this class so you can switch from light to dark mode.
navbar--shadow	Add a smooth shadow around on the navabar.
navbar--border-1px	Add a 1px border at the bottom of the navbar.
navbar--border-2px	Add a 2px border at the bottom of the navbar.
navbar--border-3px	Add a 3px border at the bottom of the navbar.
navbar--uppercase	Switch navbar's text style from normal to uppercase
navbar--strong	Make navbar's font weight bolder.
navbar-dropdown--inverse	You can also switch the dropdown background from light to dark with this class.
navbar-dropdown--arrow	Add an arrow on top of the dropdown.

Helper classes

There are a lot of helpful classes in this theme that can be used in a a large number of scenarios. Below is the table with all the helper classes and what do they do:

Note All helper classes are located in assets/scss/core/_helper.scss

Remove/Reset classes

Class	Description
`no-margin`	Remove any margin of the element on which it is applied.
`no-padding`	Remove any padding of the element on which it is applied.
`no-border`	Remove the borders of the element on which it is applied.
`no-radius`	Remove the rounded corners of elements on which it is applied.

Quick font customization

Class	Description
`text-uppercase`	Transform the text to uppercase.
`text-capitalize`	Capitalize the first letter of each word.
`text-normal`	Remove any text transformation.
`text-right`	Align text to right on any resolution.
`text-left`	Align text to left on any resolution.
`text-center`	Center text on any resolution.
`strong`	Make the font weight bold.
`strong-400`	You have different weight font values, if the font familly has all this options.
`strong-500`	Light bold font weight.
`strong-600`	Bold font weight.
`strong-700`	Strong bold font weight.

Quick border classes

Class	Description
`b-xs-all`	Add a 1px solid border around the element you applied the class on.
`b-xs-top`	Add a 1px solid border on top of the element you applied the class on.
`b-xs-right`	Add a 1px solid border on right of the element you applied the class on.
`b-xs-bottom`	Add a 1px solid border on bottom of the element you applied the class on.
`b-xs-left`	Add a 1px solid border on left of the element you applied the class on.

Quick padding classes

We are using REM - root ems - instead of pixels for spacing (padding and margins) and also for text and other elements.

Boomerang's base size is 16px, which means that 1rem is equal to 16px.

Class	Description
`pt-0` `pt-1` `pt-2` `pt-3` `pt-4` `pt-5`	pt = padding top.
`pr-0` `pr-1` `pr-2` `pr-3` `pr-4` `pr-5`	pr = padding right.
`pb-0` `pb-1` `pb-2` `pb-3` `pb-2` `pb-3`	pb = padding bottom.
`pl-0` `pl-1` `pl-2` `pl-3` `pl-4` `pl-5`	pl = padding left.
`px-1` `px-2` `px-3` `pr-4` `pr-5`	px = horizontal padding.
`py-1` `py-2` `py-3` `py-4` `py-5`	py = vertical padding.

Quick margin classes

Class	Description
`mt-0` `mt-1` `mt-2` `mt-3` `mt-4` `mt-5`	mt = margin top.
`mr-0` `mr-1` `mr-2` `mr-3` `mr-4` `mr-5`	mr = margin right.
`mb-0` `mb-1` `mb-4` `mb-3` `mr-4` `mr-5`	mb = margin bottom.
`ml-0` `ml-1` `ml-2` `ml-3` `ml-4` `ml-5`	ml = margin left.

Quick shadow classes

Class	Description
`z-depth-1` `z-depth-1-bottom` `z-depth-1-top`	First depth level for using on blocks on cards.
`z-depth-2` `z-depth-2-bottom` `z-depth-2-top`	Second depth level for using on blocks on cards.
`z-depth-3` `z-depth-3-bottom` `z-depth-3-top`	Third depth level for using on blocks on cards.
`z-depth-4` `z-depth-4-bottom` `z-depth-4-top`	Fourth depth level for using on blocks on cards.
`z-depth-5` `z-depth-5-bottom` `z-depth-5-top`	Fifth depth level for using on blocks on cards.

3. Working with SASS

Creating a new SASS style

Is highly recommended that all the customized styles to be stored only within assets/scss/core/_custom.scss file from the SASS folder so you can update this theme everytime with no effort.

Note When you update Boomerang, make sure not to ovveride the _custom.scss file, that may contain styles you created, with the empty one from Boomerang pack. That's a reason why, before every update, you should backup your project files.

Working with SASS variables

All the SASS variables are located in assets/scss/variables/_variables.scss.

All variables are well organized and grouped by sections/elements. We tried to make them as intuitive as possible. However, a little play arrow will be necessary in order to familiarize yourself.

Note We recommend not to modify the original _variables.scss file, but use the already created _custom.scss instead located in the same folder.

Copy and paste the variables or group of variables from the original file in _custom.scss and replace existing values with your new ones.

To learn more about how to use SASS and include it in your work envrionment, take a look at the official website: sass-lang.com/guide

Change typography settings

Next, we will show you how to customize Boomerang at a basic level so you can get started with a fresh and original layout.

via Google Fonts

1

Go to Google fonts and choose your webfont. You can import it in the _base.scss file with a CSS @import or directly in the head section of your page via <link> tag. All fonts are now included in the head section via <link> tag
2

Edit $font-family-base (_variables.scss) with the font you want to use on large text content.
3

Edit $font-family-alt (_variables.scss) with the font you want to use on headings, headers or special titles. Replace both variables with the same value if you want only one font type on your website.

via Manual Import

1

Copy the font files in the fonts folder: assets/fonts
2

Open assets/scss/core/_fonts.scss file from the SASS folder and create your font type as you can see in the example put there.
3

Replace $font-family-base and/or $font-family-alt from _variables.scss file with the font family name you just created.

Set up base colors

Boomerang comes with 5 base colors which are meant to paint your website with the combination that best suits your brand or project.

Each base color variable is represented by a special CSS class that can be used on a large variety of elements in your website. Also it can be used to color the main sections so you can delimit the content in a nice and colorful way.

Next we will explain how Boomerang base colors are thought and how you can use them in your project by creating your one color palette:

Variable	Class	Description
`$color-base-1`	`.bg-base-1`	This is the website's main color. Choose what color would you want your website to have (brand color)
`$color-base-2`	`.bg-base-2`	This is the website's second main color. In case you want a two color website choose a contrast color. If not, replace it with the same value as $color-base-1
`$color-base-3`	`.bg-base-3`	Choose a neutral color such gray or light gray.
`$color-base-4`	`.bg-base-4`	Replace it with a dark color that comes in contrast with the first two base colors.
`$color-base-5`	`.bg-base-5`	Replace it with a light color that comes in contrast with the two three base colors.

Example of color palette

Base color 1 .bg-base-1

Base color 2 .bg-base-2

Base color 3 .bg-base-3

Base color 4 .bg-base-4

Base color 5 .bg-base-5

Each base color has a corresponding text color. Bellow you can find the table with the specific classes.

Variable	Class	Description
`$color-base-text-1`	`.c-base-1`	Replace with a color that can be readable on top of $color-base-1. The same applies for the next variables.
`$color-base-text-2`	`.c-base-2`
`$color-base-text-3`	`.c-base-3`
`$color-base-text-4`	`.c-base-4`
`$color-base-text-5`	`.c-base-5`

4. Good to know

Free updates: Learn more

With each purchased license for Boomerang you get free lifetime updates. Access the following link to get yours: Wrapboostrap - Download resender

Credits

Thanks to all the creative minds that worked on creating such great products and plugins. All plugins used for this theme are located in the assets folder.

Free plugins

Plugin name	Description	URL
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/
Light Gallery	A customizable, modular, responsive, lightbox gallery plugin for jQuery.	http://sachinchoolur.github.io/lightGallery/
Isotope	Isotope is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.	https://isotope.metafizzy.co/
Milestone counter	Milestone counter is for animating numbers in certain intervals.
Page scroller	Easy scroll-to-top functionality	http://mattvarone.com/web-design/uitotop-jquery-plugin/
Swiper JS	Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers	http://idangero.us/swiper/
Parallax	Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.	http://pixelcog.github.io/parallax.js/
No UI Slider	noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.	https://refreshless.com/nouislider/
Waypoints	Waypoints is the easiest way to trigger a function when you scroll to an element.	http://imakewebthings.com/waypoints/
Wow Animation	Reveal Animations When You Scroll. Easily customize animation settings: style, delay, length, offset, iterations.	http://mynameismatthieu.com/WOW/
Vide	Easy as hell jQuery plugin for video backgrounds.	http://vodkabears.github.io/vide/

Premium plugins

Note Premium plugins need their own license before using it in your project. You can find in the table below the URL where you can purchase any othe the needed plugins.

Plugin name	Description	URL
Master Slider	Everything you have ever wanted in an animated content and image slider, all packaged up into one awesome plugin! Build touch friendly, cross-browser and animated content sliders with Master Slider.	Purchase
Revolution Slider	Slider Revolution is an innovative, responsive jQuery Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, you will be telling your own stories in no time!	Purchase

Image and other graphic sources

Even though we are using free-comercial licensed images and graphic, below you can find the table with the image sources we used in our template.

All images are used for preview purpose only. If you would like to use any of these images in your project, please make sure that you have a proper license

Image sources

Graphics (Icons, Patterns, Mockups)

Note Take a look at the license.txt file located in the images folder. You will find there the source and URL for each image we have used in Boomerang.

Thank you!

And last, but not least, we want you thank you for choosing our product!

Best regards,
Webpixels Team

Let your imagination run wild with Boomerang

Hompages

Industry

And more...

You deserve a beautiful website!

Overview

Theme customization

Working with SASS

Good to know

1. Overview

Boomerang Multipurpose Template

1. Overview

What's in the box

1. Overview

Getting started

Basic template

1. Basic version

2. Slidebar version

2. Theme customization

Choosing the CSS style

Creating custom styles

Boxed or fluid

Headers and navigations

Placement

Color schemes

Navbar options

Helper classes

Remove/Reset classes

Quick font customization

Quick border classes

Quick padding classes

Quick margin classes

Quick shadow classes

3. Working with SASS

Creating a new SASS style

Working with SASS variables

Change typography settings

via Google Fonts

via Manual Import

Set up base colors

Example of color palette

4. Good to know

Free updates: Learn more

Credits

Free plugins

Premium plugins

Image and other graphic sources

Image sources

Graphics (Icons, Patterns, Mockups)

Thank you!