This document aims to explain the best way to work with the product and its components.

- All the best and enjoy coding.

Getting started tips

• Do not start from scratch, use an existing asset and modify it to learn how it works.
• Explore the sources for ideas and sample code.
• Use Firebug or Chrome Developer Tools to find bugs on your website. Using one of those tools will help you to save time analyzing the site and finding elements structure, like classes, id or tags
  • Quick tip: open your site with Chrome, press F12 and go to console tab, reload your page and if something goes wrong you will see your page errors in red text.
• In case of errors, someone might have seen it too, you can try a Google search for a quick fix.

Technologies used

This template is based on the following technologies. Follow the links for each one of them in order to get more information:

• The project is based on Bootstrap 4

• Language used: JavaScript, SCSS and HTML

• NPM dependency manager

Before starting to customize the template, here is the project files organization structure:

+---master
|   +---js
|   |   +---modules
|   +---pug
|   |   +---sections
|   +---sass
|       +---bootstrap
|       +---components
|       +---themes
+---site
|   +---css
|   +---img
|   +---js
|   +---vendor
|   +---video
+---_PSD_mokups

Under master folder you will find all source files to be compiled using Gulp

Under site folder are placed all files once they are compiled. This files are ready to serve.

• img/: This folder contains all images used like backgrounds, logos, favicon, etc
• video/: Here you will find the video used as background. Replace to use your own one.
• css/js/vendor: This folders are the result of the compilation process

Under PSDmockups you can find some mockups used in the page.

To run this project you need to have installed a Nodejs enviroment.

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

Installing tools

The following steps are intended to be an orientation guide, if you are not experienced with this you will need to learn more about it from Google :)

• To install node and npm, go to http://nodejs.org/
• Download and install GIT for your platform http://git-scm.com/downloads

Starting the app

This command build the source files without minify

$ gulp

This task will start a development server in your favorite browser (using BrowserSync)

$ gulp serve

This flag will tel Gulp to compile for production.

$ gulp --prod

If you want to serve a production build use

$ gulp serve --prod

To enable source-maps use the following modifier (example of serve task)

$ gulp serve --sourcemaps

Themes

To use any color included just include in your index.html the theme-*.css file after the main stylesheet styles.css

<!-- SITE CSS-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/theme-a.css"> 

To add your own colors, you can edit any theme file and replace the color hex code for any other of your choice.

Adding new vendor assets

To add new third party assets, you can install using npm and then reference in vendor.json file

1. npm install something -S

   • Flag "-S" is to save the dependency in package.json

2. Edit vendor.json and add the paths to files you want to include

   "node_modules/something/some/file.js",
   "node_modules/something/some/file.css"

   Vendor assets listed in vendor.json will be copied automatically to site/vendor folder.

Finally, remember to include the files in the site using standard include tags like script or link

<script src="vendor/something/some/file.js"></script>
<link rel="stylesheet" href="vendor/something/some/file.css">

Modernizr

Modernizr build is generated after the command npm install ends. Specifically, using the postinstall script in package.json which at the same time executes the "modernizr" scripts responsible for generating the file modernizr.custom.js under folder node_modules/modernizr/modernizr.custom.js The configuration of the Modernizr build can be found in file modernizr-config.json

Vendor Assets