front-end-template

What is this?

This is a propsed templating system which will help FEDs get started on a project to maintain best practices and standards accross the team.

The template is pre built with foundation framework - I would recommend this as the framework is built and integrates well with scss

Structure

.
├── app
|  └── assets
|  |    ├── fonts
|  |    ├── images
|  |    ├── js
|  |    └── scss
|  |        └── _app
|  |        ├── _foundation
|  |        └── main.scss
|  ├── data
|  ├── layouts
|  ├── pages
|  └── partials
├── build (will be generated when running grunt)
├── Gruntfile.js
├── package.json
├── bower.json

Build your project in app/ folder
data/ : you can place json files here and use it in your pages for content population
pages/ : this is where you build your pages
partials/ : partials can be a header or footer for multiple layout styles and can also be modules
layouts/ : serves as your primary layout, each of the pages located in pages/ folder is inserted here

Dependencies

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

Skip this if you already have them

• Download and install node.js on your machine.
• Open your terminal or command line type node or npm to check if node.js is successfully installed.
  If not found, create the path stated in the error (this is for windows)
• Using the command line, install Grunt: Type npm install -g grunt-cli - this will install grunt on your machine and be globally available
• Download and install ruby on your machine
• Restart your terminal or command line and type in gem to check if ruby is successfully installed
• Install Compass via gem: Type gem install compass
• Your now set up!

Running FED template

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile.js as well as install and use Grunt plugins. Once you're familiar with that process, you may run the template using the pre built grunt tasks below

Go to the root directory where the template is forked or cloned

• Right click on the directory and Git Bash here or use terminal or cmd
  
• npm install to install node modules from the package.json, see package.json for dependencies
  
• bower install to install packages from bower.json, see bower.json for dependencies

Grunt Tasks

Grunt	Task	Description
Default $ grunt	assemble:site	Compiles handlebar files (layout, partial, pages)
	compass:dev	Compiles scss files
	jshint	Helps to detect errors and potential problems in js code
	connect:livereload	Automatically reloads the page on update
	copy	Copy files automatically
	watch	Updates files on save
Build $ grunt build	assemble:site	Compiles handlebar files (layout, partial, pages)
	compass:build	Compiles scss files - minified
	jshint	Helps to detect errors and potential problems in js code
	uglify	Concatinates, combine and minify js files
	copy	Copy files automatically
	pngmin	Optimize png for smaller size
	combine_mq	Combine matching media queries into one media query definition

Note: Update and or edit everything on the app folder - all action is in here while build folder contains all the compiled HTML and assets