Bright - Template

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 -g gulp

<!-- 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 Basic template

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

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 files "app/include/mixins/"

extends include/templates/layout

block vars
 - var header_transparent = false;

append css

append content
 .container
   .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)

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">