#thanks to https://github.com/BrenMurrell/handlebars-static-html-generator A simple starter for building HTML templates with Handlebars and Sass.

Make sure Node JS, NPM and Gulp already installed on your computer.

• Navigate to the directory where the hbs-sass-starter folder is located using Terminal.
• Execute npm install.

• Execute npm start or gulp.
• Open http://0.0.0.0:3373/ on your web browser.

If you wannna add 3rd party library to your project, install the library using npm, and then include it on gulpfile.js file, please see code below for example.

var vendorStyles = [
  // 3rd party styles here, if possible use minified version files please.
  'node_modules/bootstrap/dist/css/bootstrap.min.css'
 ];
 
 var vendorScripts = [
  // 3rd party scripts here, if possible use minified version files please.
  'node_modules/bootstrap/dist/js/bootstrap.min.js'
 ];

There are already gulp task that will minifying and concating all of your 3rd party libraries, you just need to execute gulp combine, wait for a moment and it will automatically creates vendors.min.css and vendors.min.js inside assets folder. Do not forget to include vendors files on base.pug file. Finally, run your project using npm start or gulp.

• assets
  • css : This folder contains prebuild files, styles.css and styles.min.css (do not edit this file).
  • fonts : Place your fonts here, also do not forget to import it on _variables.scss (my recommendation).
  • icons : Place your icons here.
  • images : Place your images here.
  • js : This folder contains custom js code for all page and js code per page, scripts.js, home.js.
• src
  • index.hbs * : Example page hbs file
  • partials
    • header.hbs : Store your header layout here;
    • footer.hbs : Store your Footer layout here;
  • sass
    • base
      • _global.scss : Global styles for html, body, section, headings, anchor etc.
      • _mixins.scss : Store your mixins here;
      • _placeholders.scss : Store your placeholders here;
      • _variables.scss : Store your variables here;
      • _path.scss : Store your variables path for assets;
    • components
      • _components.scss : It contains components styles such as _buttons.scss, _modals.scss etc.
      • _button.scss : It contains button styles.
      • _modals.scss : It contains modals styles.
    • layouts
      • _footer.scss : It contains footer styles.
      • _header.scss : It contains header styles.
    • pages
      • _index.scss : Example scss for specific page (index page).
    • styles.scss : Import all scss files.
• index.html : Prebuild HTML file, other HTML files will be placed on root folder too.

• gulp-compile-handlebars : Compile Handlebars templates.
• gulp-filelist : Output list of files in current stream to JSON file or custom format.
• gulp-plumber : Prevent pipe breaking caused by errors from gulp plugins.
• gulp-pug : Gulp plugin for compiling Pug templates, compile Pug into HTML.
• gulp-rename : Gulp plugin to rename files easily, adding .min suffix.
• gulp-sass : Compile your SCSS into CSS.
• gulp-uglify : Minify your JS.
• gulp-clean-css : Minify your CSS.
• gulp-concat : Concating your files.# bd-test