Documentation

Introduction

Thank you for purchasing our template. This documentation will help to familiarise you with how Boomerang template is structured and how to use the template features. At times, you may need further assistance if something is either not covered, or clear in the documentation. Please feel free to email here: web-master72[at]yandex.com


What’s included

Within your Bootstrap theme you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.

theme/
  ├── gulpfile.js
  ├── package.json
  ├── docs/
  ├── app/
  │   ├── assets/
  │   │   ├── css/
  │   │   ├── fonts/
  │   │   ├── images/
  │   │   ├── js/
  │   │   ├── scss/
  │   │   └── video/
  │   ├── include/
  │   │   ├── mixins/
  │   │   └── templates/
  │   │        └── navigation/
  │   │        │    ├── navigation-single.pug
  │   │        │    ├── navigation.pug
  │   │        ├── footer.pug
  │   │        ├── layout.pug
  │   │        ├── off-canvas.pug
  │   │        └── sidebar.pug
  ├── dist/
  │   ├── assets/
  │   │   ├── css/
  │   │   ├── fonts/
  │   │   ├── images/
  │   │   ├── js/
  │   │   ├── scss/
  │   │   └── video/

Getting started

The template is using Gulp to automate the development and build processes. All you should do to start your project is to open the terminal in the root directory (where the package.json file is located) and enter fallowing commands.

npm install gulp-cli -g

<!-- When you’re done, make sure you’ve installed the rest of the theme’s dependencies: -->

npm install

<!-- Start. Be aware that this replaces existing "dist" files, so proceed with caution. -->

gulp

*Note. You should already have Node installed in your machine to build the project.


Pug template engine

Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers. You can visit official site for more info. We strongly recommend you to use Pug.


Basic template

Copy the example below into a new PUG file to get started with it.

extends include/templates/layout

block vars
   - var header_transparent = false;

append css

append content
   h1 Hello, world!

Pug Mixins

Here is an example how you can use Pug mixins. All available mixins you can find in file "app/include/mixins/mixins.pug"

extends include/templates/layout

block vars
   - var header_transparent = false;

append css

append content
   .row
       .col-lg-3.col-md-6
           +IconBox("ti-layout", "Title Text", "Content Text", "text-center", true)
       .col-lg-3.col-md-6
           +IconBox("ti-cup", "Title Text", "Content Text", "text-center", true)
       .col-lg-3.col-md-6
           +IconBox("ti-harddrives", "Title Text", "Content Text", "text-center", true)
       .col-lg-3.col-md-6
           +IconBox("ti-desktop", "Title Text", "Content Text", "text-center", true)

If you want add changes for all pages just edit "include/templates/layout.pug" file:

include ../mixins/mixins
doctype html
html(lang="en")
   head
       meta(charset="UTF-8")
       meta(name="viewport" content="width=device-width, initial-scale=1.0")
       meta(name="description" content="")
       meta(name="author" content="")

       title Boomerang - Template

       block vars

       block css
           // Favicons
           link(rel="shortcut icon" href="assets/images/favicon.png")
           link(rel="apple-touch-icon" href="assets/images/apple-touch-icon.png")
           link(rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png")
           link(rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png")

           // Web Fonts
           link(href="https://fonts.googleapis.com/css?family=Poppins:400,500,600%7cPlayfair+Display:400i" rel="stylesheet")
           link(href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet")

           // Plugins
           link(href="assets/css/plugins.min.css" rel="stylesheet")

           // Template core CSS
           link(href="assets/css/template.css" rel="stylesheet")

   body

       ...

       // Scripts
       script(src="assets/js/custom/jquery-3.2.1.min.js")
       script(src="assets/js/custom/popper.min.js")
       script(src="assets/js/bootstrap/bootstrap.min.js")
       script(src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0rANX07hh6ASNKdBr4mZH0KZSqbHYc3Q")
       script(src="assets/js/custom/plugins.min.js")
       script(src="assets/js/custom/custom.min.js")

Icons

By default, Boomerang makes use of the Themify, Simple Line Icons and Font Awesome Free icon sets.

How to use:

<!-- Themify -->
<i class="ti-spray"></i>

<!-- Simple Line Icons -->
<i class="icon-diamond icons"></i>

<!-- Font Awesome -->
<i class="fab fa-accessible-icon"></i>
  • Result:

Google map

You need to use YOUR own Google API Key. You can get API Key here.

script(src="assets/js/custom/jquery-3.2.1.min.js")
script(src="assets/js/custom/popper.min.js")
script(src="assets/js/bootstrap/bootstrap.min.js")
script(src="http://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE")
script(src="assets/js/custom/plugins.min.js")
script(src="assets/js/custom/custom.min.js")

Twitter

The Twitter feed element uses a HTML5 data attribute called 'data-twitter' to determine which feed to display. You can enter your ID. How to do it:

  1. - Go to www.twitter.com and sign in as normal, go to your settings page.
  2. - Go to "Widgets" on the left hand side.
  3. - Create a new widget for what you need eg "user time line" or "search" etc.
  4. - Feel free to check "exclude replies" if you don't want replies in results.
  5. - Now go back to settings page, and then go back to widgets page and
  6. - you should see the widget you just created. Click edit.
  7. - Look at the URL in your web browser, you will see a long number like this: 345735908357048478
  8. - Use this as your ID below instead!

<!-- Twitter widget-->
<aside class="widget twitter-feed-widget">
   <div class="widget-title">
       <h6>Twitter Feed</h6>
   </div>
   <div class="twitter-feed" data-twitter="345170787868762112" data-number="1"></div>
</aside>

Contact Forms

Open «assets/php/contact.php» and make the following changes:

// Mail settings
$to = "yourmail@here.com";

// You can put here your email
$header = "From: noreply@neomax.com\r\n";

If contact form not working:

<?php
   mail('you@yourmail.com','Test mail','The mail function is working!');
   echo 'Mail sent!';
?>
  • 1. Save this code as mailtest.php
  • 2. change you@yourmail.com to your e-mail address
  • 3. upload mailtest.php to your server
  • 4. open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
  • 5. check your inbox to see if a test message arrived.

If it works:

  • 1. double-check your form script for errors (like e-mail address misspelling)
  • 2. use the same e-mail address as your form recipient
  • 3. double-check your SPAM filters and SPAM/Junk/Bulk mailboxes

If it not:

Contact your host and ask them to check PHP mail() setting.


SCSS Changes

Create new files for your variables and any other scss changes and add it to the "assets/scss/template.scss" file.

@import "bootstrap/functions.scss";
@import "bootstrap/variables.scss";
@import "custom/functions.scss";
@import "variables.scss";
@import "your-variables.scss";
@import "custom/bootstrap.scss";
@import "components.scss";
@import "your-scss-changes.scss";

Now you can add or overwrite Bootstrap and our variables.


CSS Changes

If you not use SCSS: Create a new CSS file and add the following <link> to the HTML after the <head> section:

...
<!-- Template core CSS-->
<link href="assets/css/template.css" rel="stylesheet">
<link href="assets/css/your-css.css" rel="stylesheet">

Smooth scroll

You can add "Smooth scroll" effect to any link or button with "href" attribute. For example:

...
<a class="smoothscroll btn btn-lg btn-circle btn-brand" href="#IDtoScroll">Get Started</a>
...