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
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/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 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.
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!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")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>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")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:
<!-- 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>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!';
?>If it works:
If it not:
Contact your host and ask them to check PHP mail() setting.
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.
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">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>
...