Brainwave documentation

revision #1 dated 08.06.2015

Introduction

Brainwave is theme, which is created to make impression on you and your customers. We offer you an up-to-date and really high quality work with outstanding design and well-thought usability approach. This template can help you to achieve a significant increase of the conversion rates and number of positive feedback, as well as will simply be a nice surprise for your customers.

Please do not forget to rate "Brainwave" on ThemeForest. This can be done in Downloads area. Just select "Brainwave" in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Get Started

You can use either the standart version of the theme, or 'gulp' version.

These are the primary projects that make up the Brainwave development:

  • gulp — gulp is a streaming build tool.
  • BrowserSync — BrowserSync keeps multiple browsers and devices synchronized while developing, along with injecting updated CSS and JS. In previous versions of the theme we used LiveReload for injecting assets.
  • Sass — Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Installing project dependencies

Your development machine must meet the following two requirements to get started:

  • Node >= 0.10.0
  • npm >=2.1.5

After installing Node.js, we recommend that you update to the latest version of npm:

npm install -g npm@latest

From the command line:

  • Install gulp and Bower globally with npm install -g gulp
  • Navigate to the theme directory, then run npm install

Available gulp commands

  • gulp watch — Compile assets when file changes are made
  • gulp build — Compile assets for production

Node modules used:

Project Structure

assets — style files, scripts, html elements and pages are located here.

css — standart style libraries that are used in the template.

fonts — set of fonts to display the icons used in the template.

img — images of template and content images.

html — files of pages and html elements.

js — files of scripts used in this template.

sass — sass files.

css — original, *.min and sourcemaps files.

fonts — set of fonts to display the icons used in the template.

img — images of template and content images.

js — original, *.min and sourcemaps files.

php — php files for subscribe and contact form.

video — video files.

works — html files for pages of single works.

*.html — template pages. (more information in the section html structure)

docs — template documentation.

node modules — node.js modules for gulp.js.

promo_img — images for template intro page.

gulpfile.js — gulp tasks.

index.html — template intro page.

package.jsonhttps://docs.npmjs.com/files/package.json

Home

The template provides 6 variants of sliders for the homepage, from which you can choose the one you most like.

Slider #1

You can add new slides or delete existing from the container with class slides-container. To add a new slide it is needed to create a container <div class="slide"> ... </div>. There is an ability to add animation for any content slide using attribute data-layer-animation, and the delay of animation in data-animation-delay. The list of available animations can be found here.

For each slide you can set the color overlay attribute data-overlay-color and the overlay opacity data-overlay-opacity

Gulp version file location: assets/html/partials/_home-slider-1.html

Slider HTML:

We are Brainwave

Premium Theme for great people

Brainwave people with creative vision
WE ARE JUST CREATIVE PEOPLE
We realize your dreams

Vestibulum non iaculis nulla. Suspendisse luctus tortor sed ligula eleifend, quis pellentesque lorem interdum. Quisque faucibus sapien et arcu volutpat.

Slide item HTML:

Slider #2

You can add new slides or delete existing from the container with class slides-container. To add a new slide it is needed to create a container <div class="slide"> ... </div>.

For each slide you can set the color overlay attribute data-overlay-color and the overlay opacity data-overlay-opacity

Gulp version file location: assets/html/partials/_home-slider-2.html

Slider HTML:

We are brainwave
We Are just crative
We realize your dreams

Slide item HTML:

Video background vs slider

You can add new slides or delete existing from the container with class slides-container. To add a new slide it is needed to create a container <div class="slide"> ... </div>. There is an ability to add animation for any content slide using attribute data-layer-animation, and the delay of animation in data-animation-delay. The list of available animations can be found here.

For each slide you can set the color overlay attribute data-overlay-color and the overlay opacity data-overlay-opacity

Gulp version file location: assets/html/partials/_Sail-Away-slider.html

Slider HTML:


We are Brainwave

Premium Theme for great people

Brainwave people with creative vision
WE ARE JUST CREATIVE PEOPLE
We realize your dreams

Vestibulum non iaculis nulla. Suspendisse luctus tortor sed ligula eleifend, quis pellentesque lorem interdum. Quisque faucibus sapien et arcu volutpat.

Slide item HTML:

Video init HTML:

To install a new video for background it is needed to upload 3 different videos (mp4, ogv, webm) into the folder "/video/" , and a .jpg image. All these files must have the same name. Next, for the attribute data-video set up the name of the video file. Also you can add the overlay with the attribute data-overlay-color, and its opacity data-overlay-opacity

Video background vs text rotator

For this variant of header only one slide is predicted. There is an ability to add animation for any content slide using attribute data-layer-animation, and the delay of animation in data-animation-delay. The list of available animations can be found here.

Gulp version file location: assets/html/partials/_Sail-Away-text-rotator.html

Slider HTML:


Premium Theme for great people
We are Brainwave, just crative people, creative vision

Slide item HTML:

Rotator HTML:

We are Brainwave, just crative people, creative vision

To set the text rotation in <span class="js-rotating"> ... </span> it is needed to insert your own words separating them with comma ,. To change the animation, use the attribute data-animation, all possible variants are located here.

Video init HTML:

To install a new video for background it is needed to upload 3 different videos (mp4, ogv, webm) into the folder "/video/" , and a .jpg image. All these files must have the same name. Next, for the attribute data-video set up the name of the video file. Also you can add the overlay with the attribute data-overlay-color, and its opacity data-overlay-opacity

Image background vs text slider

You can add new slides or delete existing from the container with class slides-container. To add a new slide it is needed to create a container <div class="slide"> ... </div>. There is an ability to add animation for any content slide using attribute data-layer-animation, and the delay of animation in data-animation-delay. The list of available animations can be found here.

Gulp version file location: assets/html/partials/_home-image-slider.html

Slider HTML:


We are Brainwave

Premium Theme for great people

Brainwave people with creative vision
WE ARE JUST CREATIVE PEOPLE
We realize your dreams

Vestibulum non iaculis nulla. Suspendisse luctus tortor sed ligula eleifend, quis pellentesque lorem interdum. Quisque faucibus sapien et arcu volutpat.

Slide item HTML:

Image init HTML:

To change the background image it is needed to insert its link into the attribute data-background. Also you can add the overlay with the attribute data-overlay-color, and its opacity data-overlay-opacity

Image background vs text rotator

For this variant of header only one slide is predicted. There is an ability to add animation for any content slide using attribute data-layer-animation, and the delay of animation in data-animation-delay. The list of available animations can be found here.

Gulp version file location: assets/html/partials/_home-image-text-rotator.html

Slider HTML:


Premium Theme for great people
We are Brainwave, just crative people, creative vision

Slide item HTML:

Rotator HTML:

We are Brainwave, just crative people, creative vision

To set the text rotation in <span class="js-rotating"> ... </span> it is needed to insert your own words separating them with comma ,. To change the animation, use the attribute data-animation, all possible variants are located here.

Image init HTML:

To change the background image it is needed to insert its link into the attribute data-background. Also you can add the overlay with the attribute data-overlay-color, and its opacity data-overlay-opacity

Pages

For each page you can set several background variants (color, image, image with overlay). There are two variants of section indent (big and small), are set by using classes page-section, page-section-small.

To set the color for the section it is neede to add an attribute data-background-color with its color.

To set the image for section background, it is needed to add a class bg-section and add attribute data-background where you insert the path to the image which must be the background.

Also you can set the color overlay with the attribute data-overlay-color, and its opacity data-overlay-opacity.

About us

V1

Gulp version file location: assets/html/partials/_about-us.html

About Us

We work as a single mechanism. Everyone
complements the other. We are Brainwave agency.

We are an entertainment design company driven by a passion for narrative and design in an
ever­changing media landscape. We believe that great design tells a story and can only be achieved
through a seamless integration of cultural insight and design thinking.

High quality
Easy to use
Fresh Design
Fully Responsive
Well Documented
Fast Support

V2

Gulp version file location: assets/html/partials/_about-us-2.html

About Us

We work with all countries of the world

We are an entertainment design company driven by a passion for narrative and design in an ever­changing media landscape. We believe that great design tells a story and can only be achieved through a seamless integration of cultural insight and design thinking.

High quality
Easy to use
Fresh Design
Fully Responsive
Well Documented
Fast Support
Our team

Gulp version file location: assets/html/partials/_team.html

Our Team

We are creative minds with a passion to innovations design

Tincidunt orci in augue adipiscing interdum. Phasellus luctus commodo ullamcorper. Nutempormenean mollis eleifend mauris, iaculis duis semper.

Our Skills
Communication
Branding
Design
Development
Marketing
Services

Gulp version file location: assets/html/partials/_services.html

Services

We offer Exclusive services to satisfy your needs

We Also Do
  • Brand strategy.
  • Corporate identity.
  • Marketing strategy.
  • Digital media.
Process
  1. Ideas search.
  2. Discussion process.
  3. Visual design.
  4. Development.
Branding
Web Design
Graphic Design
Development
Photography

Looking for exclusive creative services?

Lets talk
Portfolio

The template provides 5 options of Portfolio list (2 columns, 3 columns, 4 columns, masonry, paralax) and 5 variants of displaying the portfolio one.

The pages are located in the folder "/works/".

2 columns version

Gulp version file location: assets/html/partials/_portfolio-2.html

Portfolio

The biggest market leaders appreciate our works. Do you want to be one of them?

Quisque efficitur libero feugiat faucibus mattis. Nam sagittis lobortis elit vel fermentum. Curabitur ut bibendum justo. Praesent finibus augue ac ipsum tristique accumsan.

3 columns version

Gulp version file location: assets/html/partials/_portfolio-3.html


4 columns version

Gulp version file location: assets/html/partials/_portfolio-4.html

Portfolio

The biggest market leaders appreciate our works. Do you want to be one of them?

Quisque efficitur libero feugiat faucibus mattis. Nam sagittis lobortis elit vel fermentum. Curabitur ut bibendum justo. Praesent finibus augue ac ipsum tristique accumsan.

Masonry version

Gulp version file location: assets/html/partials/_portfolio-masonry.html

Portfolio

The biggest market leaders appreciate our works. Do you want to be one of them?

Quisque efficitur libero feugiat faucibus mattis. Nam sagittis lobortis elit vel fermentum. Curabitur ut bibendum justo. Praesent finibus augue ac ipsum tristique accumsan.

Paralax version

Gulp version file location: assets/html/partials/_portfolio-paralax.html

Portfolio

The biggest market leaders appreciate our works. Do you want to be one of them?

Quisque efficitur libero feugiat faucibus mattis. Nam sagittis lobortis elit vel fermentum. Curabitur ut bibendum justo. Praesent finibus augue ac ipsum tristique accumsan.

Gulp version file location: assets/html/partials/_introducting.html


To remove the arrows, to the element with the class owl-carousel you need to add class no-arrow


To remove the pagination, add class no-dots to the element owl-carousel


Promo layers

To create animation layers you need some images with the same size to be placed into the container with the class layers, add all exept one the class layer.

To add the animation for one of the layers you need to add the attribute data-layer-animation, full list of available animations can be found here. You can also add the animation delay for each layer (in ms) with the usage of the attribute data-animation-delay.

Gulp version file location: assets/html/partials/_call-action-1.html

Why Brainwave?

Make your creative website with the powerfull template

Cras posuere odio sit amet mi fermentum, laoreet ante, ullamcorper convallis sed, finibus sit amet augue. Donec viverra nisi id dolor scelerisque interdum erat eget, pharetra volutpat purus.

Get Pricing Buy Now

Gulp version file location: assets/html/partials/_call-action-2.html

Why Brainwave?

Ultra responsive and retina ready template with clean design

Muisue luctus kusto mattis, tempor nibh nec, facilisis mi. Ut sit amet nisi feugiat, efficitur esta, luctus nunc. Aliquam erat volutpat. Donec commodo mauris ac metus commodo aliquet.

Lets Talk Play Video
Testimonials

Gulp version file location: assets/html/partials/_testimonials.html

To remove the arrows, to the element with the class owl-carousel you need to add class no-arrow


To remove the pagination, add class no-dots to the element owl-carousel


Clients

Gulp version file location: assets/html/partials/_clients.html

We love our clients and are ready to help

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed nibh vitae felis efficitur pretium a
at justo. Vestibulum sed porttitor nisi. Nullam posuere sit amet mauris eget rhoncus.

Latest News

Gulp version file location: assets/html/partials/_latest-news.html

Latest News

Quisque aliquam egestas semper. Phasellus est ipsum, facilisis at pellentesque et, dapibus at nulla.
Morbi risus dolor, lobortis volutpat cursus et, fermentum vitae purus mauris eget rhoncus.

New Design trends in web

Phasellus est ipsum, facilisis at pellentesque et, dapibus at nulla. Morbi risus dolor, lobortis volutpat cursus et, fermentum vitae purus mauris eget.

Read More

Minimalistic Design Forever

Phasellus est ipsum, facilisis at pellentesque et, dapibus at nulla. Morbi risus dolor, lobortis volutpat cursus et, fermentum vitae purus mauris eget.

Read More

Hipster’s Style in Web

Phasellus est ipsum, facilisis at pellentesque et, dapibus at nulla. Morbi risus dolor, lobortis volutpat cursus et, fermentum vitae purus mauris eget.

Read More
404 page

Gulp version file location: assets/html/404.html

404 Page not found
Under construction

Gulp version file location: assets/html/under-construction.html

SORRY We are currently under construction!

Contact

Gulp version file location: assets/html/partials/_contact.html

Contact

Do not delay, but rather say hello and we start
to work on your project

Call Us in any time
+1 234 567 890
Welcome for coffee
245 Quigley Blvd, Ste K
Just Say Hello
support@scientecraft.com

Donec vitae massa posuere, commodo justo tempor, convallis lectus. Sed non felis tincidunt, facilisis
felis vitae, mollis est. Vivamus non interdum dolor.

To change the map you need to insert the appropriate block with relevant attributes.


Parameters: Description: Default value:
map-lon="" Longitude 41.850033
map-lat="" Latitude -87.650052
map-marker-lon="" Marker longitude 41.850033
map-marker-lat="" Marker latitude -87.650052
map-marker-title="" Marker title Hello :)

To set up the form settings, you need to open the file /php/contact.php and change the value of a variable "$to", $to = 'info.scientecraft@gmail.com';.

Subscribe

The template is implemented through the subscription service mailchimp.

Gulp version file location: assets/html/partials/_newsletter.html

In the file /php/subscribe.php you need to change the values of two variables ($MC_API_KEY, $MC_FORM_ID). Here you can find the value 'API Key' for the variable $MC_API_KEY. Also it is needed to change the form ID ($MC_FORM_ID); go to the list of forms, then in the list settings go to the bottom of the page.

 

Blog

The template provides the blog with the sidebar of without it. Files relating to Blog - blog-left.html, blog-right.html, blog-list.html, blog-post.html.

Blog post HTML:

Post with media gallery

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo aliquet ante sed congue. Nullam lectus lectus, consequat in malesuada nec, tristique eu massa. Integer condimentum elit at diam ultrices imperdiet. Nulla facilisi. Cras malesuada sagittis felis non facilisis. Suspendisse aliquam ex hendrerit sapien fermentum tincidunt ac a odio. Morbi dapibus faucibus ante ac efficitur. Maecenas tellus enim, viverra id nisl eget, ultricies porta ante. Nullam sed tortor nisi.

Continued 
Photo block
Features list
High quality
Easy to use
Fresh Design
Fully Responsive
Well Documented
Fast Support
List
We Also Do
  • Brand strategy.
  • Corporate identity.
  • Marketing strategy.
  • Digital media.
Services
Branding
Web Design
Graphic Design
Development
Photography
Skills
Communication
Branding
Design
Development
Marketing
Counters
Projects Done
Happy Clients
Coffee Cups
Great Ideas
Icons

FontAwesome all icons


Result:

Et-Line all icons


Result:

Elegant all icons


Result:

Simple Line all icons


Result:

Headers

There are three size header:

Large header
Normal header

Small header
Option Description
data-background-color Set background color
data-background-color="#222"
data-background Set background image
data-background="img/content/photo-12.jpg"
data-color Set text color
data-color="#222"

Header variants:



Center color title

Praesent elementum ut risus at laoreet.






Center Page Title

Praesent elementum
ut risus at.











Left color title

Praesent elementum ut risus at laoreet.






Image title

Praesent elementum ut risus at laoreet.












image title

Praesent elementum ut risus at laoreet.






image overlay title

Praesent elementum ut risus at laoreet.












image overlay title

Praesent elementum ut risus at laoreet.






Page title with border

Helper classes

Name Description:
.page-section Contaner with margin-top and margin-bottom
.page-section-small Contaner with small margin-top and margin-bottom
.title-2 Title type #2
.title-3 Title type #3
.pos-relative position: relative;
.opacity-0 — .opacity-100 Opacity 0, 0.01, 0.02, ..., 0.98, 0.99, 1
.fw-1 — .fw-9 Font weight 100, ..., 900
.ls-01 — .ls-099 Letter spacing 0.01em, ..., 0.99em
.mt0 — .mt100 Outside margin-top
.mt-xs0 — .mt-xs100 Outside margin-top Phones (<768px)
.mt-sm0 — .mt-sm100 Outside margin-top Tablets (≥768px)
.mt-md0 — .mt-md100 Outside margin-top Desktops (≥992px)
.mt-lg0 — .mt-lg100 Outside margin-top Desktops (≥1200px)
.mt-0 — .mt-100 Outside negative margin-top
.mt-xs-0 — .mt-xs-100 Outside negative margin-top Phones (<768px)
.mt-sm-0 — .mt-sm-100 Outside negative margin-top Tablets (≥768px)
.mt-md-0 — .mt-md-100 Outside negative margin-top Desktops (≥992px)
.mt-lg-0 — .mt-lg-100 Outside negative margin-top Desktops (≥1200px)
.mb0 — .mb100 Outside margin-bottom
.mb-xs0 — .mb-xs100 Outside margin-bottom (<768px)
.mb-sm0 — .mb-sm100 Outside margin-bottom Tablets (≥768px)
.mb-md0 — .mb-md100 Outside margin-bottom Desktops (≥992px)
.mb-lg0 — .mb-lg100 Outside margin-bottom Desktops (≥1200px)
.mb-0 — .mb-100 Outside negative margin-bottom
.mb-xs-0 — .mb-xs-100 Outside negative margin-bottom Phones (<768px)
.mb-sm-0 — .mb-sm-100 Outside negative margin-bottom Tablets (≥768px)
.mb-md-0 — .mb-md-100 Outside negative margin-bottom Desktops (≥992px)
.mb-lg-0 — .mb-lg-100 Outside negative margin-bottom Desktops (≥1200px)
.pt0 — .pt100 Inside margin-top
.pt-xs0 — .pt-xs100 Inside margin-top Phones (<768px)
.pt-sm0 — .pt-sm100 Inside margin-top Tablets (≥768px)
.pt-md0 — .pt-md100 Inside margin-top Desktops (≥992px)
.pt-lg0 — .pt-lg100 Inside margin-top Desktops (≥1200px)
.pb0 — .pb100 Inside margin-bottom
.pb-xs0 — .pb-xs100 Inside margin-bottom Phones (<768px)
.pb-sm0 — .pb-sm100 Inside margin-bottom Tablets (≥768px)
.pb-md0 — .pb-md100 Inside margin-bottom Desktops (≥992px)
.pb-lg0 — .pb-lg100 Inside margin-bottom Desktops (≥1200px)
.display-ib display: inline-block;
.display-ib display: inline-block; Phones (<768px)
.display-ib display: inline-block; Tablets (≥768px)
.display-ib display: inline-block; Desktops (≥992px)
.display-ib display: inline-block; Desktops (≥1200px)
.display-b display: block;
.display-b display: block; Phones (<768px)
.display-b display: block; Tablets (≥768px)
.display-b display: block; Desktops (≥992px)
.display-b display: block; Desktops (≥1200px)
.display-i display: inline;
.display-i display: inline; Phones (<768px)
.display-i display: inline; Tablets (≥768px)
.display-i display: inline; Desktops (≥992px)
.display-i display: inline; Desktops (≥1200px)
.display-tc display: table-cell;
.display-tc display: table-cell; Phones (<768px)
.display-tc display: table-cell; Tablets (≥768px)
.display-tc display: table-cell; Desktops (≥992px)
.display-tc display: table-cell; Desktops (≥1200px)

Customization

File /assets/scss/inc/variables.scss contains variables with template styles, you can change their values as you want.

//-------------------------------------
// Menu
// 
// 29.  Path settings
// 36.  Media queries breakpoints
// 45.  General settings
// 56.  Typography
// 127. Page header
// 142. Footer
// 160. Social buttons
// 172. Forms
// 208. Buttons
// 251. Navbar style
// 284. Features
// 296. Progress bar
// 302. Carousel
// 314. Carousel team
// 323. Blog
// 329. Pagination
// 338. List
// 347. Service
// 359. Portfolio
// 365. Helpers
// 370. Counters
//
//-------------------------------------

In the folder /assets/scss/inc/ there are all files that are responsible for the block styles that are used in the template.

Credits

Name Description
animate.css A cross-browser library of CSS animations.
Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework.
Isotope Filter & sort magical layouts.
Appear JS library for scroll animation.
Background Video JS library for background video.
jQuery jQuery is a fast, small, and feature-rich JavaScript library.
Magnific Popup Magnific Popup is a responsive lightbox.
Nicescroll Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.
Superslides Fullscreen slider.
Morphext The simplest text rotator powered by jQuery and Animate.css
Owl Carousel 2 Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Splashbase Free photo stock
Unsplash Free photo stock