grunt-front-end-template

grunt compiled bootstrap sass and js with hbs template.

About this template

This proposed template is to help the FED's to implement the concept of layout, partial, page and handlebar(hbs) templates.

Dependencies

you may download or skip the following if you already have.

• node.js
  
• grunt.js
  
• bower
  
• ruby
  
• compass
  

How to use?

go to the root directory where the template is cloned.

1. right click and 'git bash here'
2. type npm install (node_modules created)
3. type bower install

Dependencies:

check your gruntfile.js and bower.json

Directory Structure:

└── src
    └── data
    └── public
         └── components
         └── favicons
         └── images
         └── scripts 
         └── styles 
         └── videos 
    └── views
         └── _layouts
         └── _partials
         └── pages

basic usage:
----views
'layouts' folder, where you will find the default.hbs for header and footer and also the otherTemplate.hbs in case you need a different header and footer on the other pages.

'partials' folder, where you will find the globalfooter and globalheader and again in case you need a different header and footer, this is also where you can create a new header and footer.
how it works
default.hbs:
-uses global_footer.hbs and global_header.hbs
{{> global_header }}
{{> global_footer}}
otherTemplate.hbs can use other global header and footer that you created.
{{> your_other_global_header }}
{{> your_other_global_footer}}

'pages' folder consists all of the pages/body contents that you need in your project, where you can add, edit and delete.
{{>body}}

----data
you can add data or array contents(optional).

----public
components > bootstrap-sass > assets > stylesheets > pages
where you will find all the components that you need on this project. you can add additional scss on 'pages' folder and add it on '_bootstrap.scss' below.

grunt tasks:

run the cmd or right click in your directory and select 'git bash here' then type npm run dev to compile and run your project. run npm run build to build your project, and the 'dist' will be your upload folder.

tasks	description
npm install	this command installs a package, and any packages that it depends on.
bower install	this command installs a package, and any packages that it depends on.
npm run dev	for compiling and running the project.
npm run build	(dist) this is your upload folder.
bower install sampleFile(bootstrap) --save	to install the bootstrap into the dependencies using bower.
npm install sampleFile(bootstrap) --save-dev	to install the bootstrap into the dependencies using npm.